Contributed by Taiwan friend Lu Cheng-yi

Because I got used to the async/await of ES7 a while ago, I found it difficult to use XD in ES6 Promise after getting used to it, so I wanted to use Babel as a translator to build the development environment of ES7 to play async/await.

Build the development environment

├ ─ ─ package. Json ├ ─ ─ node_modules ├ ─ ─ gulpfile. Js ├ ─ ─ index. The js ├ ─ ─ the SRC │ ├ ─ ─ index. The js │ └ ─ ─ utils. Js ├ ─ ─ build ├ ─ ─ The index, js └ ─ ─ utils. JsCopy the code

Package. json and node_modules are familiar, so I won’t go into details.

Gulpfile.js is a gulp task configuration.

3. Put the source code of ES7 in SRC.

4. Put ES5 code translated by Babel in build.

Index.js is the starting point of the entire program. Do nothing but run index.js in build.

// index.js 
                        require('./build/index');
                        Copy the code

The development process

Gulp will automatically translate the SRC code and put it into build. When executing, it will run the outermost index.js file, which will automatically run build/index.js.

Gulp configuration

Review images

Gulp is a great automation tool that uses packages written by others to speed up the development process, such as Compile, Minify, Uglify, etc. To Gulp less familiar can see Gulp start guide (https://github.com/nimojs/gulp-book).

Use Babel in Gulp

// gulpfile.js 
                        var gulp = require('gulp'); 
                        var babel = require('gulp-babel'); 
                        gulp.task('babelify',function() {   return gulp.src('src/**/*.js').pipe(babel({     presets: ['es2015', 'es2016', 'es2017'],     plugins: [["transform-runtime", {      "polyfill": false,       "regenerator": true     }]]   })).pipe(gulp.dest(build)) });Copy the code

Simply type gulp babelify on the command line and gulp will source all js files in SRC, translate them into ES5 code using Babel, and export them to build. These modules are needed for this section:

{" babel-plugin-transform-Runtime ": "^6.12.0", "babel-preth-ES2015 ": "^6.13.2"," babel-preth-es2016 ": "^ 6.11.3", "Babel - preset - es2017" : "^ 6.14.0", "gulp - Babel" : "^ 6.1.2"}Copy the code

Error handling

The above configuration already converts code to ES5, but if there is an error (possibly syntactically incorrect) in the translation process, the error must be printed, so add this paragraph after Babel:

.on('error', function(err){
                          console.log(err.stack);
                          this.emit('end');
                         })
                         Copy the code

If there is an error, it will print something like this:

Source Map

If an error occurs in the program, it will tell you which line it occurred:

Review images

It tells us that there is an error in line 5 of build/index.js, but the code inside the build is generated by Babel, so it will be ugly, and the translated code will be quite different from the original code.

For example, before translation:

// before.js async function hello(){ return 'Hello World'; }hello();Copy the code

After the translation:

Review images

This makes it hard to debug. We want to know which line of the source code he is wrong on, and then we need to use the Source map.

The Source Map stores the location of the application code before and after the conversion, which can be automatically mapped. We just need to add sourcemaps to it, and now gulpfile.js looks like this:

View the image so that Babel automatically generates the Source map as it is translated. Source map is not supported by Node itself, so you need to use the source-map-support module to load the source map. It is easy to use, just add a line at the beginning of the application:

// index.js require('source-map-support').install(); // Add the line require('./build/index');Copy the code

Running again shows where the error occurred in source code:

If you look at the image, you can see that the error occurred in the third line of SRC /index.js, where these two modules are used:

{" gulp - sourcemaps ", "^ 1.6.0", "the source - the map - support" : "^ 0.4.2"}Copy the code

Watch

Most of the functionality is now complete, but every time you modify a file in SRC you need to re-gulpbabelify to translate, so you want gulp to automatically monitor the file and translate any changes.

To do this, use gulp’s Watch function and add this paragraph to gulpfile.js:

gulp.task('watch', function(){ return gulp.watch(['src/**/*.js'], ['babelify']); }); gulp.task('default', ['babelify', 'watch']);Copy the code

Gulp will then automatically monitor all JS files in SRC and babelify any changes.

tips

Gulp will automatically babelify and monitor js files whenever you run gulp on the Command line.

If according to the above steps slowly do very troublesome, there are ready-made making repo (https://github.com/Larry850806/nodejs-ES7-template), also welcome any comments or Pull Request.

[Articles you may be interested in]

How do you react

React Gets started and resources guide

Use ESLint to check code quality

Build a secure JavaScript sandbox

Five, get started with Webpack, this is enough

Sixth, the third CSS Congress guangzhou looking for a venue ~ ~ for introduction ~ ~

7. What are Web Components

React and Babel

Don’t React. Don’t React

React

The overlooked details of JavaScript

How to Improve React App performance

Review images

Front End circle – Create a professional front end technology conference

For web front-end developers to provide technology sharing and communicationplatform

Build a good front-end ecosystem and promote the development of Web standardization

Website: http://fequan.com

Weibo: fequancom| QQ group: 41378087

Review images

Long click the QR code to follow us

Contribution: [email protected]

Sponsorship: [email protected]