Babel not compile?

Source: Internet
Author: User

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 6is 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.

babelYou 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?

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.