Babel Guide--Basic Environment construction

The status quo of ECMAScript

ECMAScript, a design specification for scripting languages, is based on this specification and has many well-known languages, such as JavaScript, ActionScript, and so on. And a few years ago, with the advent of node. JS and the many new webapi that HTML5 brought, JavaScript was suddenly lifted to an incredibly important position. At that stage, we can collectively refer to the time as ECMAScript5 (ES5).

After that, soon began to ECMAScript (ES6) of the formulation, ES6 a wash JS past a lot of strange tricks, vague place, brought into a lot of modern programming language features, and its implementation speed is far faster than HTML5 and CSS3. And in today's discussion of ES6, in fact ECMAScript (ES7) is already in the development (currently is mainly to amend and compensate for ES6 deficiencies), many can be used in the actual production environment.

However, as mentioned above, even ES6, there are still many shortcomings, so hurried ES7 on-line, although you are using ES6, but with today's technology development speed, since ES7 has an amendment, early cut into ES7 to keep up with the pace of the times.

JavaScript is a language that needs to be run by the environment, whether it is browser environment or server environment, need environment support. In the following list, you can see your browser, and the current support for the JavaScript environment for ES6:

https://kangax.github.io/compat-table/es6/

Babel

At this point, if you want to try using ES6/ES7, you can use the Babel translator. The Babel itself is designed to be designed for JavaScript (all that needs to be converted to JavaScript). So as the official website of the propaganda said:

Babel transforms your JavaScript

Babel's official website: Babeljs.io

The Babel itself is designed to work in a node. JS environment, and you can also use Babel-core for your browser environment. At the same time, there is an open source project called Babel-standalone that supports the use of Babel in non-node. JS environments.

So this article focuses on the instructions for configuring and using Babel based on the node. JS Environment.

From deep dive, you can easily divide the configuration usage area under node. js into: CLI + various environment configurations (GULP, IDE, etc.).

CLI Environment

In general, using Babel is used in a variety of environments and rarely directly using CLI mode, but this pattern can help understand the basic configuration of Babel. Babel has a lot of converter plugins, so it's necessary to figure out how to configure it.

The official blog has a basic Environment installation instructions: HTTPS://BABELJS.IO/BLOG/2015/10/31/SETTING-UP-BABEL-6, this chapter I just use this tutorial as a simple translation.

Babel Basic Installation

You have two options, the global NPM environment is installed BABEL-CLI, or the current project is installed under Babel-core:

--save-dev Babel-core

`

Add plug-ins (Plugins)

You can add a . BABELRC file (in JSON format) to your project's root directory.

Suppose you need a feature called es2015-arrow-functions Support:

--save-dev babel-plugin-transform-es2015-arrow-functions

`

Note that this is the NPM that is added in the current project directory.

and modify the . BABELRC file to register this plugin:

' json{'plugins ": [" Transform-es2015-arrow-functions "]} 

`

Babel provides a number of ES7 plug-ins, specifically can query the official website plug-in list: Babel Plugins list.

Plug-in naming mechanism

In particular, the question of the naming mechanism of the Babel plugin name is explained here.

First, you can query the list of plugins in the Babel Plugins lists, and you will see the following:

You can see the plug-in name, such as: Es2015-arrow-functions, Es2015-block-scoped-functions, es2015-block-scoping, and so on.

Second, the corresponding packages directory in the project on Babel GitHub, the names of the above several plugins are:

'shelles2015-arrow-functions        = babel-plugin-transform-es2015-arrow-functionses2015-block-scoped-functions = babel-plugin-transform-es2015-block-scoped-functionses2015-block-Scoping = Babel-plugin-transform-es2015-block-scoping   

`

Again, these plug-ins are written to the name in the . BABELRC configuration file, which corresponds to:

'shelles2015-arrow-functions        = transform-es2015-arrow-functionses2015-block-scoped-  functions = transform-es2015-block-scoped-functionses2015-block-scoping = Transform-es2015-block-scoping   

`

To unify the salutation, we define the following:

Plugin name-shape: es2015-arrow-functions, Es2015-block-scoped-functions, es2015-block-scoping

Plug-in (install) package name-shape: babel-plugin-transform-es2015-arrow-functions, Babel-plugin-transform-es2015-block-scoped-functions , babel-plugin-transform-es2015-block-scoping

Configuration name-shape: transform-es2015-arrow-functions, Transform-es2015-block-scoped-functions, transform-es2015-block-scoping

In general, in . BABELRC , or in gulp, or using Babel-standalone's online translation functionality, the configuration name is used. Be sure to distinguish between the three, otherwise it is easy to make mistakes.

Babel preset value (presets)

Currently, as the official Babel, it mainly contains the following content:

• es2015
• React
• stage-0
• Stage-1
• Stage-2
• Stage-3

These presets, which contain the required plug-in packages for your Babel configuration (. babelrc), can be mixed with multiple preset and can also be added plugin on this basis.

Using presets, similar to the use of plug-ins, perform the packages required by the NPM installation, and then load them in the configuration:

--save-dev babel-preset-es2015 Babel-preset-react

`

In the . Bablerc File

' json{'presets ": [" React "]} 

`

Use in Gulp

To use Babel in Gulp is a very simple thing, the official provides a simple tutorial, here I do not translate, because it is very simple.

Specifically, if you need to use a plugin from Babel in Gulp, NPM must be installed in the current project instead of using Global. Also namely:

--save-dev

。

Gulp supports the use of . Bablerc .

Using in the IDE environment

Here take Webstorm as an example, the official website provides a tutorial, but in fact the Jetbrians series of the IDE provides a mechanism called file Wathcer, supporting the real-time modification of files at the same time, can automatically translate the target files, including JS, CSS and so on. Here is the main introduction to using File Watcher.

First, you need to install BABEL-CLI globally:

--global BABEL-CLI

`

Second, in Webstorm (JB home is the IDE Universal), open file---Settings Tools, file watcher:

Click on the + in the top right corner to see the following interface:

Select the Babel entry:

Here, file Type , you can choose ECMAScript 6, so that you can keep your project on the JS file not processed. As follows:

For Arguments , you can modify the specific parameters of the command, you can refer to the Babel Options, such as:

--source-maps--out-file $FileNameWithoutExtension $.js $FilePath $

。

At this point, you can add a. es6 file to the Webstorm project, and each time you save it (you press CTRL + S), he will automatically translate a. js file out.

Real-time translation using Babel-standalone

As described above, Babel-standalone provides a version that is close to the official Babel synchronization and can be used in non-node. JS environments, and this class library consolidates most of Babel's plugins.

You can install via bower:

Install babel---save

`

After installation, directly in your project to use, his translation parameters, and . BABELRC Keep the basic consistency.

' Javascriptdefined ([function(Babel) {' let HelloWorld = ' Hello World '; alert (HelloWorld) ';  var options = {presets: [' es2015 '],plugins: [' TRANSFORM-ES2015-MODULES-AMD ']}eval (babel.transforms (code , options));})      

Babel Guide--Basic Environment construction