Detailed explanation of the use of babel

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

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

{
  "presets":["es2015"]
}

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

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"
 }
}

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"
 }
}

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!

Recommended reading:

JS imitation classic legendary game

##How to deal with invalid hot loading of Webpack dev server

How do sub-components call parent components in ES6

The above is the detailed content of Detailed explanation of the use of babel. For more information, please follow other related articles on the PHP Chinese website!