Home >Web Front-end >JS Tutorial >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 or
cnpm install babel -cli --save-devUsing Taobao mirror installation will be faster.
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: cnpm install babel-preset-es2015 --save-dev
{ "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 directorylet 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
{ "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
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!