Use gulp+babel to switch to es6

content

References ⇧

Preface ⇧

Recently, in the process of learning es6, I found that although es6 has been out for a while, the major browsers are not fully supported (chrome, firefox supports most of them, IE does not support), as a front-end enthusiast, browser compatibility is forever It's a priority, so why don't you ask Du Niang if you're undecided! After searching, I found that there are two solutions, the first one? Using WebStorm's own File Watcher function + Babel to automatically convert ECMAScript 6 code to ES5 code (not recommended, because it is very stuck), the second consideration is gulp, using gulp + babel to convert to es6 , I am very excited, so I wrote down my experience, Right as a witness!

Knowledge Reserve⇧

ES6

ECMAScript 6.0 (hereafter referred to as ES6) is the next-generation standard for the JavaScript language, which was officially released in June 2015. Its goal is to make the JavaScript language can be used to write complex large-scale applications and become an enterprise-level development language.

The standard-setters have plans to publish the standard once a year in the future, using the year as the version. Because the first version of ES6 was released in 2015, it is also called ECMAScript 2015 (ES2015 for short).

In June 2016, the slightly revised "ECMAScript 2016 Standard" (ES2016 for short) was released as scheduled. Since the changes are very small (only the includes method and exponent operator for array instances are added), ES2016 and ES2015 are basically the same standard, and they are both regarded as ES6. According to the plan, ES2017 will be released in June 2017.

gulp

gulp.js is a stream-based, code-over-configuration next-generation build tool. See gulp for details

node.js/npm

Node.js is a JavaScript runtime environment based on the Chrome V8 engine.
Node.js uses an event-driven, non-blocking I/O model, making it lightweight and efficient.

npm, the package manager for Node.js, is the world's largest ecosystem of open source libraries.

For details, see node.js Chinese website

Babel

Babel is a widely used transcoder that converts ES6 code to ES5 code for execution in existing environments. See Babel for details

Building steps ⇧

Install node.js/npm

Enter the node.js Chinese website, click the download in the navigation bar, and download it according to the system (npm will be downloaded together with node.js).

After the download is successful, take the window system as an example: win key + r, enter cmd, enter, call up the command line, and execute the following command:

node -v The nodejs version number will appear after the download is successful

npm -v The npm version number will appear after the download is successful

Learn about common npm commands npm manual
install cnpm

Installation command: npm install cnpm -g --registry= https://registry.npm.taobao.org

After the download is successful, you can execute cnpm -v to view the version

The npm installation plug-ins are downloaded from foreign servers. Due to the influence of the network, slow or abnormal downloads often occur. The emergence of cnpm solves this problem very well. cnpm is a complete mirror of npmjs.org , which can be used to replace the official version. The synchronization frequency is once every 10 minutes (cnmp command is the same as npm, just replace npm with cnpm ). cnmp official website

Install gulp globally

Installation command: cnpm install gulp -g

Check if it is installed correctly: gulp -v

Create a new project (take my project as an example)

Created a new project named test on the desktop

Use cmd to enter the command line, cd to the test project (cd Desktop\test), execute the gulp command, it will appear

````dos
Local gulp not found in ~\Desktop\test
Try running:npm install gulp

````

Open with IDE (I am webstorm)
cmd executes the cnpm init command to configure the package.json file

If you are a novice like me, you can enter all the way! At the end, you will be prompted Is this ok? Enter yes, and then go back to the IDE, you will find that the package.json file has been generated in the project. (package.json is an essential configuration file based on nodejs projects. It is a common json file stored in the project root directory. See here for details )

To install gulp locally, execute the following command
cnpm install --save-dev
cnpm install gulp --save-dev

cmd to the test directory to execute the gulp command, it will appear

![](http://images2015.cnblogs.com/blog/1047638/201705/1047638-20170513210723879-1150797279.png)

Create a file named gulpfile.js in the project root directory. According to the prompt of gulp Chinese website , write the following code
````javascript
var gulp = require('gulp');

gulp.task('default', function() {
// put your default task code here
console.log('ok'); //experimental code
});
````

cmd to the test directory to execute the gulp command, it will appear

This marks the completion of the gulp installation
Install the gulp-babel plugin, go back to cmd to the test directory, and execute:

cnpm install --save-dev gulp-babel babel-preset-es2015
Go back to the IDE, reset the gulpfile.js file, and write the following code

const gulp = require('gulp');
const babel = require('gulp-babel');
 
gulp.task('default', () => {
    return gulp.src('es6/*.js')
        .pipe(babel({
            presets: ['es2015']
        }))
        .pipe(gulp.dest('build'));
});

So far, the environment for gulp+Babel to es6 has been set up.

Try your skills ⇧

Change the js writing environment of the webStorm editor

File => Setting => languages & Frameworks => javascript =>

Create a new es6 folder, create a test.js file under the es6 standard under the es6 folder, and write the following code

let [a,b] = [1,2];
console.log(a,b);

cmd to the test directory to execute the gulp command

Back to the IDE, the test file generates a folder called build and has a let.js file in it, build/let.js This is the es5 standard js file we converted.

back to table of contents

~End~