How to use babel installation and configuration tutorial

babel is a widely used transcoder that can convert ES6 code into ES5 code so that it can be executed in the existing environment. This article mainly introduces the use and installation configuration of babel. Friends who need it can refer to it

Introduction

babel is a widely used The transcoder can convert ES6 code into ES5 code so that it can be executed in the existing environment. This means that you can write programs in ES6 now without worrying about whether the existing environment supports it.

Installation and configuration

##npm install babel-cli --save-dev orcnpm install babel -cli --save-devUsing Taobao mirror installation will be faster.

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 completed, create the configuration file .babelrc. This file must be placed in the project root directory. Its basic format is:

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

The presets field is set for transcoding. Rules, plugins are the plugins of babel that are 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 are now installing babel In the current directory, you cannot directly convert the babel command in the terminal. You 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, and run

npm run build , check 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, check the results

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

Folder screenshot

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Comparison of map, set, array, and object in ES6 (detailed tutorial)

How to use Angular to achieve changes Detection

How to implement star rating component development in vue-star

The above is the detailed content of How to use babel installation and configuration tutorial. For more information, please follow other related articles on the PHP Chinese website!