Home > Web Front-end > JS Tutorial > body text

Detailed explanation of the use of babel

php中世界最好的语言
Release: 2018-03-17 15:14:41
Original
2861 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!

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!