Fasting is outdated, SystemJS is not a panacea, it has a lot of problems with the build (I personally report a lot of bugs), Gulp can be replaced with NPM Scripts. Use Webpack.

Disclaimer: This post may seem uninteresting to advanced JavaScript developers. It is aimed at beginners who want to learn ECMAScript 2015+.

With the advent of partial support for ECMAScript 2015 in Chrome 45 and NodeJS 4, we, web developers, have entered a new era of the industry, which brings us not only bread and butter, but also a lot of fun. Unfortunately, the new JavaScript is not supported by all browsers. The developer comes to the rescue of Babel, who compiles new JavaScript into old-fashioned and supported by all browsers (even ancient). In fact, ECMAScript.next compilers in ECMAScript 5 are more than one: Traceur , ES6 Transpiler and others. But Babel (formerly 6to5) is the most popular and fastest growing compiler today.
')
Matryoshka , in turn (as without it, after all, is the blog of the project Matreshka.js), is a moderately popular framework, sometimes causing the question “where to start” among newbies.

Solution - Matreshka.js ECMAScript.next boilerplate . This repository kills two birds with one stone: it contains a customized Gulp, SystemJS, as well as an example of simple modules using the Matryoshka.

<habracut / |>

The repository is made for everyone, not only for Matryoshka users. If you do not want to use this framework, simply do not import it and delete the relevant files from / src / lib / .

The example is simplified as much as possible so that the newbie focuses on implementing, exclusively, JavaScript code. CSS preprocessor, browserify, jspm and other things are not included, and the libraries that you want to connect can be copied directly to the / src / lib / folder.

What will we use?

• Gulp is a “task launcher”.
• SystemJS is a universal module loader (AMD, CJS, ES6).
• Babel - JavaScript compiler for the new generation of the old.
• Matreshka is the default framework.

How to start?

(you will need to work on the command line)

• Install Node.js 4+ and npm (npm is usually installed automatically with the installation of Node.js).
• Install Gulp globally using the npm install --global gulp .
• Download or clone the repository.
• Inside the repository folder, run the npm install command, which loads the dependencies defined in package.json .
• Run the gulp command to make sure everything went well (the / dist / folder is created, and the demo applications in /index.html and /dist/index.html look the same).

The method of installing the necessary tools may differ in different operating systems, so if at some stage you encountered a problem, before reporting issues, try contacting Google, Yandex or DuckDuckGo .

This is all that is needed to set up the environment. Let's write the code.

• Change the application from the repository.
• Run gulp again to compile your scripts.

After you have called the gulp command, as a result, you get a ready-to-use application in the / dist / folder, which can be uploaded to the server.

Development process

There are two ways to compile ECMAScript.next into old ECMAScript 5.

The first is a compilation right in the browser. Each time you reload the page, Babel / browser compiles ES.next on the fly. With a small amount of code this is convenient, but if the number of modules is large, you may find that the page loads slowly. This method is used by default.

The second way is to precompile files. In this case, you will have to resort to using the command line, running gulp scripts:watch before you start changing files in the / src / folder. At the same time, all compiled files will go to the / js / folder. In order to use this development method, you need to change the file /src/config.js , replacing all the paths that start with / src / with those that start with / js / (for example, app: 'src/app' replaced with app: 'js/app' ) and remove all references to Babel from the babelOptions (remove babelOptions and transpiler ). You can not bother with these renames: in the folder / src / , besides config.js there is a file config.precompiled-example.js , which can be renamed to config.js (of course, by deleting the old config before that).

Project structure

/ css / - CSS files.
/ templates / - Templates that you might like to import into the application.
/ img / - Images used in HTML and CSS.
/ js / - ECMAScript-compiled 5 uncompressed JS files (folder in the repository is not included).
/ src / - The folder with the source code of the application.
/ src / app / - The folder with the application that you are developing.
/src/app/app.js - The starting point of your application.
/ src / lib / - Any libraries you wish to include in the project.
/src/config.js - SystemJS config.
/ dist / - Compiled and ready-to-use application that can be uploaded to the server and shown to the client (folder in the repository is not included).
/gulp.js - Gulp file.
/package.json - Metadata for npm.
/index.html - Main HTML file.
/.gitignore - List of ignored files and folders for Git.

Gulp tasks

gulp scripts - Compiles files from / src / to / js / . You do not need this task if you are using browser compilation.
gulp scripts:watch - Listens for changes in the / src / folder and runs task scripts for each modified file. When using browser compilation, this task is not needed.
gulp scripts:build - Compiles all the files included in the project into one minified .js file and puts it in the / dist / js / folder.
gulp html - Uses gulp-htmlprocessor to replace the piece of HTML that is responsible for connecting the scripts needed for the development process to connect the only minified script located in the / dist / js / folder.
gulp default or just gulp runs scripts:build , html , copies CSS files from / css / to / dist / css / and copies the contents of the / img / folder to / dist / img /

Just in case, duplicate link .

All good.