ECMAScript 6(ES6)
The development or the popularity of the rapid can be said to be unimaginable, for many people ECMAScript 5(ES5)
are still popular. Modern browsers have ES6
more or less support for new and newer, but the support is not high, so you have to ES6
wait a while for new features to be used directly in the browser.
The popularity of the right is ES6
essential to have to say babel
. The babel
code can be ES6
perfectly converted into ES5
code, so we don't have to wait for the features that the browser supports to use in the project ES6
.
For people who are just starting out, babel
there may be some problems, because babel
the online tutorial for use is basically for the babel 6
previous version, and babel 6
there are some changes to the previous version.
Because the previous version can be used as long as it is installed babel
, the previous version contains a lot of stuff, which also leads to downloading a bunch of unnecessary stuff. So babel 6
split into two packages: babel-cli
and babel-core
. If you want to use Babel on the CLI (terminal or REPL) babel-cli
, download it if you want to use it in node babel-core
.
babel 6
is as modular as possible, and if babel 6
it is converted using the previous method, ES6
it will be output as is, and will not be converted because the plugin needs to be installed. If you want to use the arrow function, you have to install the arrow function plug-in npm install babel-plugin-transform-es2015-arrow-functions
.
Here's the Practice (command line using Babel).
Install Babel:
install -g babel
command line conversion JS file:
babel es6.js
Tips:
package `babel-cli`.npm install -g babel-cli
Installation babel-cli
:
install -g babel-cli
Re-conversion:
babel es6.js
Command line output:
[1, 2, 3].map(x => x * x)
You can see that it has not been translated as expected ES5
, as there is no plug-in installed. The arrow function is used above, so the arrow function plug-in is installed. But this is too much trouble, if you use ES6
other features, but also to install other plug-ins, you can download only one plug-in:
install babel-preset-es2015
This plugin contains other plugins.
After installing the plug-in, run:
--presets es2015
Output:
[1, 2, 3].map(function (x) { return x * x;})
It's got the results you want.
babel
You can output the ES6 file transformation to another file:
babel es6.js -o es5.js# 或者babel es6.js --out-file es5.js
can also be used to convert an entire directory:
-d lib/ src/
Run babel-node
the command to run the ES6 code directly at the command line:
babel-node> console.log([1,2,3].map(x => x * x))[ 1, 4, 9 ]
You can also run the ES6 file directly.
babel es6.js> [1, 2, 3].map(function (x) { return x * x;})
Finish
Babel not compile?