The post is outdated, SystemJS is not a panacea, it has many assembly problems (I personally reported a lot of bugs), Gulp can be replaced with NPM Scripts. Use Webpack.

Disclaimer: This post may seem uninteresting for 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 in the industry, which brings us not only bread and butter, but also gives us a lot of pleasure. Unfortunately, the new JavaScript is not supported by all browsers. Babel comes to the aid of the developer, who compiles the new JavaScript into old-fashioned and supported by all browsers (even ancient ones). In fact, there are more than one ECMAScript.next compilers in ECMAScript 5: Traceur , ES6 Transpiler, and others. But Babel (formerly 6to5) is the most popular and fastest growing compiler to date.

Matryoshka, in turn (as without it, it's still the Matreshka.js project blog), a moderately popular framework that sometimes raises the question “where to start” from newcomers.

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

<habracut / |>

The repository is made for everyone, not just for users of Matryoshka. If you do not want to use this fremvork, just do not import it and delete the corresponding files from / src / lib / .

The example is maximally simplified so that the beginner focuses on the implementation of 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 the "task launcher."
• SystemJS is a universal module loader (AMD, CJS, ES6).
• Babel is a new generation JavaScript compiler to 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 along with the installation of Node.js).
• Install Gulp globally with the command npm install --global gulp.
• Download or clone the repository.
• Inside the repository folder, run a command npm installthat loads the dependencies defined in package.json .
• Run the command gulpto 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 way to install the necessary tools may vary on different operating systems, so if you encounter a problem at some point before reporting on issues, try contacting Google, Yandex or DuckDuckGo .

That's all it takes to set up an environment. Let's write the code.

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

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

Development process

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

The first is to compile directly in the browser. Each time the page is reloaded, 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 the files. In this case, you will have to resort to the help of the command line, starting gulp scripts:watchbefore you start changing the files in the / src / folder . In this case, all compiled files will go to the / js / folder . In order to use this development method, you need to modify the /src/config.js file , replacing all the paths starting with/ src / to those that start with / js / (for example, app: 'src/app'replace with app: 'js/app') and remove from the config all references to Babel (remove babelOptionsand transpiler). You can not bother with these renames: in the / src / folder , in addition to config.js, there is a config.precompiled-example.js file that can be renamed to config.js (of course, deleting the old config before that).

Project structure

/ css / - CSS files.
/ templates / - Templates that you may come to import in the application.
/ img / - Images used in HTML and CSS.
/ js / - Uncompressed JS files compiled in ECMAScript 5 (the folder is not included in the repository).
/ 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 that you want to include in the project.
/src/config.js - SystemJS config.
/ dist /- A compiled and ready-to-use application that can be uploaded to the server and shown to the client (the folder is not included in the repository).
/gulp.js - Gulp file.
/package.json - Metadata for npm.
/index.html - The main HTML file.
/.gitignore - A 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 use browser compilation.
gulp scripts:watch- Listens to changes in the / src / folder and launches a task scriptsfor each changed 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 a piece of HTML responsible for connecting scripts needed for the development process to connecting a single minified script located in the / dist / js / folder .
gulp defaultor simplygulplaunches tasks scripts:build, htmlcopies CSS files from / css / to / dist / css / and copies the contents of the folder / img / to / dist / img /

Just in case, I duplicate the link .

Good to all.