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

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

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);

and then use the command to compile:

babel es6.js -o compiled.js

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": [] 
}

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

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

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

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

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);

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

Similarly proceed to modify the plug-in

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

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);

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);

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!

Recommended reading:

How to use js to count the number of page tags

How to develop verification code passwords in WeChat mini-programs Input box function

The above is the detailed content of Detailed explanation of the case of es6 file compilation by Babel (with code). For more information, please follow other related articles on the PHP Chinese website!