Detailed explanation of the use of babel-JS Tutorial-php.cn

Detailed explanation of the use of babel

php中世界最好的语言

Release： 2018-03-17 15:14:41

Original

2870 people have browsed it

This time I will bring you a detailed explanation of the use of babel. What are the precautions when using babel? Here is a practical case, let’s take a look.

Installation and configuration

##npm install babel-cli --save-dev or cnpm install babel-cli --save-devIt will be faster to install using Taobao mirror.

Steps: Enter the project ==>cnpm install babel-cli --save-dev

Why not install it globally

If installed globally, it means that for the project to run, the global environment must have a babel, which means that the project has a dependency on the environment. On the other hand, this does not support different projects using different versions of Babel.

Set transcoding rules

Install in the root directory: cn

pm install babel-preset-es2015 --save-dev

After the installation is complete, create the

configuration file The .babelrc file must be placed in the project root directory. Its basic format is:

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

Copy after login

presets The field settings are the transcoding rules, and the plugins are the Babel plugins set. Then configure the file:

{
  "presets":["es2015"]
}

Copy after login

At this point, the basic configuration of babel is completed.

Example demonstration:

Create demo.js in the project root directory

let a = 5;
const b = 10;
let input = [1,2,3];
input.map(item => item+1);

Copy after login

because We have installed babel in the current directory, so we cannot directly convert the babel command in the terminal. We have to use npm to run it, so first write

{
 "devDependencies": {
  "babel-cli": "^6.26.0",
  "babel-preset-es2015": "^6.24.1"
 },
 "scripts":{
   "build":"babel demo.js"
 }
}

Copy after login

in package.json to enter the root directory,

npm run buildRun and view the results

You can also output to the specified directory

{
 "devDependencies": {
  "babel-cli": "^6.26.0",
  "babel-preset-es2015": "^6.24.1"
 },
 "scripts":{
   "build":"babel demo.js --out-file bunder.js"
 }
}

Copy after login

Enter the root directory,

npm run buildRun and view the results

This time you will find the compiled bundler.js file in the root directory

Folder screenshot

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!