Detailed explanation of the case of es6 file compilation by Babel (with code)-JS Tutorial-php.cn

Detailed explanation of the case of es6 file compilation by Babel (with code)

php中世界最好的语言

Release： 2018-05-31 14:41:03

Original

1408 people have browsed it

This time I will bring you a detailed explanation of the case of babel compiling es6 files (with code). What are the precautions for babel to compile es6 files. The following is a practical case, let's take a look.

1.babel

babel official website

2. Installation

npm i babel-cli -g

Copy after login

Use the above command to install babel, where i means install, -g means install globally

##3. Use

to create the file es6.js

let num = [1,2,3,4]; 
let plusDouble = num.map(item => item * 2); 
console.log(plusDouble);

Copy after login

and then use the command to compile:

babel es6.js -o compiled.js

Copy after login

Then the compiled file will appear in the current directory , In this way, we have completed the compilation process, but when we run the compiled file, an error will still be reported. In fact, the main reason is that the above compilation did not add constraints, that is, it did not tell Babel how to compile, then the following Let’s configure babel

4. Configuration

(1) Configure through the file

in the project directory Create the file .babelrc and write the following code in the file: Since babel is used in the form of a plug-in, install the plug-in by adding the object preset and plug-in

{ 
 "presets": [], 
 "plugins": [] 
}

Copy after login

in the following code. In the following plug-in Using, you can compile ES6 code into ES5 code:

npm i --save-dev babel-preset-es2015

Copy after login

(--save-dev in the code represents installation in local development dependencies)

Then modify the file in .babelrc to The following content:

{ 
 "presets": ["es2015"], 
 "plugins": [] 
}

Copy after login

At this point, we have completed the configuration. Run the compile command to get the following results:

"use strict";  
var num = [1, 2, 3, 4]; 
var plusDouble = num.map(function (item) { 
 return item * 2; 
}); 
console.log(plusDouble);

Copy after login

The results can be printed normally after running.

Now we can proceed Simple compilation, but there are still some restrictions on some new features in es7. In this way, we use plug-ins for compilation, as shown below. The object spreader plug-in

object-rest-spread, similarly, we Use the command to install

npm i babel-plugin-transform-object-rest-spread --save-dev

Copy after login

Similarly proceed to modify the plug-in

{ 
 "presets": ["es2015"], 
 "plugins": ["transform-object-rest-spread"] 
}

Copy after login

Then test through the code, write the following content in the code (...is a pre-conceived idea in ES7):

let courses = { name: 'english', score: 90}; 
courses = { ...courses, comment: 'A'}; 
console.log(courses);

Copy after login

The result after compilation is:

'use strict';  
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };  
var courses = { name: 'english', score: 90 }; 
courses = _extends({}, courses, { comment: 'A' }); 
console.log(courses);

Copy after login

Convert the object expander by adding the _extends method, and the running code can output the result normally

(2) By adding the _extends method in webpack

Configuration file Load configuration of other attributes

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!