babel is a widely used codec ES6, ES6 code can be converted to ES5 achieved, thereby browser or other environment runs. This means that you can use to write programs es6 way, without worrying about whether to support the existing environment es6.
Babel's profile is .babelrc, stored in the root directory of the project. Babel is the first step in using this configuration file
This file is used to set and plug transcoding rule, the basic format is as follows:
{ "Presets" : [], "plugins" : [] } Presets transcoding rule field is set, the official set of rules, can be installed as required.
# Latest transcoding rule:
$ npm install--save-dev babel-preset-latest#
react transcoding rule:
$ npm install --save-dev-babel-react PRESET #
The syntax of the different stages of the proposal transcoding rule (a total of four stages), Option a:
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3
1. Profiles .babelrc
Then, these rules added .babelrc in:
{
"preset":[
"latest",
"react",
"stage-2"
],
"plugins":[]
}
Note: To use the following tools and modules all babel, you must first write .babelrc
Command line transcoding babel-cli
Babel provide babel-cli tool, a command-line transcoding
(1) global installation: npm install --global babel-cli
Babel transcoding performed in the global environment. This means that if you want to run the project, the global environment must have Babel, that is the project dependent on the environment. On the other hand, this can not support different eye-catching use different versions of Babel
Basic usage:
// result of the transcoding output
babel example.js
// transcoding results are written to a file
babel example.js --out-File compiled.js
babel example.js -o compiled.js
// entire directory transcoding
babel src - lib the dir-OUT
Babel the src -d lib
// -s parameter generating source map file
babel src -d lib -s
(2) project Installation babel-cli
Installation: npm install --save-dev babel-cli
And then rewrite package.json
{
...
"devDependencies":{
"babel-cli":"^6.0.0"
}
}
3 babel-node
babel-cli tool comes with a babel-node command provides a support environment for ES6 REPL (interactive parser). The code can be run directly ES6
babel-node need not be installed separately, but in conjunction with the installation babel-cli performed babel-node environment may enter REPL
babel-node can run scripts directly ES6:
babel-node es6.js
babel-node may also be installed in the project: npm install --save-dev babel-cli
Then rewrite package.json
{
"Scripts": {
"secript-name": "babel-node script.js"
}
}
// babel-node using alternative node, so that the script.js itself without any transcoding
4. babel-register
babel-register modules require rewriting command, as he added a hook. Thereafter, whenever the loading require suffix, will first be transcoded with Babel is .js .jsx .es .es6 the file.
安装： npm install --save-dev babel-register
require("./index.js")；
So you do not have the manual for the index.js transcoding.
Note: babel-register will only require the file command to load the transcoding, rather than the current file will be transcoded. In addition, as it is the real-time transcoding, so only suitable for use in the development environment.
5.babel-core
Some code may need to call the API babel transcoding is necessary to use babel-core module
Installation: npm install babel-core --save
Call babel-core in the project:
var babel=require('babel-core')
Configuration options on the contents of the object, you can refer to the official documents, the address is babeljs.io/docs/usage/options/
6.babel-polyfill
Babel default only convert new JavaScript syntax (syntax), the API without converting the new, such as Iterator, generator, Set, Maps, Proxy, Reflect, Symbol, Promise and other global object, and a number of methods defined in the global objects (e.g. Object.assign) will not be transcoded.
Installation: npm install --save babel-polyfill
Introduced in the head
import "babel-polyfill" // 或： require("babel-polyfill")
Babel default transcoding API is not very large, as detailed babel-plugin-transform-runtime module definitions.js (https://github.com/babel/babel/blob/master/packages/babel-plugin-transform-runtime /src/runtime-corejs3-definitions.js):