ES6 Babel Compilation

This article mainly refers to Nanyi's ES6 introduction, in order to improve their own writing an essay.

The original address please poke here ECMAScript 6 Getting Started

ECMAScript 6 is the next generation of JavaScript language standards. Since the current version of ES6 was released in 2015, it is also called ECMAScript 2015.

However, the browser is not fully compatible with ES6 and needs to be Babel compiled.

Babel is a widely used ES6 transcoding device that converts ES6 code into ES5 code, which can be executed in an existing environment.

Node installation Babel;

--save-dev babel-preset-es2015
The . BABELRC file is in the directory.

This file is used to set up transcoding rules and plugins, the basic format is as follows.

{  "presets": [], "plugins": []}

presetsThe field sets the transcoding rules, which are officially provided by the following rule set, which you can install as needed.

# ES2015 transcoding rules $ NPM Install--save-dev Babel-preset-es2015# react transcoding rules $ NPM Install--save-dev Babel-preset-react# ES7 transcoding rules for different stages of grammar proposals (total 4 stages), choose a $ NPM install --save-dev Babel-preset-stage-0$ npm install --save-dev Babel-preset-stage-1$ npm install --save-dev babel< Span class= "token operator" >-preset-stage-2$ NPM install Span class= "token operator" >--save-dev Babel-preset< Span class= "token operator" >-stage-3         

Then, add these rules .babelrc .

  {    "presets": [ "es2015", "react", "stage-2" ], "plugins": [] }

Command line transcoding BABEL-CLI

The Babel provides babel-cli tools for command line transcoding.

$ npm install --global Babel-cli //Global installation  
 
     $ npm install --save-dev Babel-cli //Install 
 and then initialize the project 
  $NPM init 
  Configure some basic parameters. 
         

{  // ...  " Devdependencies ": {  // development dependent    " babel-cli ":" ^6.0.0 "  },  " Scripts ": {    "build": "Babel src-d Lib"  // src below the js file, transcode to lib file.   },}

然后执行　　$ npm run build

< Span class= "token operator" >  
 or execute a commonly used command line. 

 # transcoding results output to standard output $ babel example.js# transcoding results write to a file #  -- out-file or-o parameter specifies the output file  $ babel example.js --  out-file compiled.js  # or Babel Example.js  - o compiled.js# entire Directory transcoding #  -- out-dir or-d parameter specifies output directory  $ babel src -- out-dir Lib  # or $ babel src  - d lib#  - s parameter generates a source map file $ babel src  - D lib - s 

Babel-register

babel-registerThe module require overrides the command and adds a hook to it. Thereafter, whenever a require file .js with the .es load, .jsx , and .es6 suffix names is used, the Babel is first used for transcoding.

--save-dev babel-register

使用时，必须首先加载babel-register。

Require ("Babel-register"); require ("./index.js");

Then, you don't need to  index.js  manually transcode the code.

It is babel-register important to note that only require the file that is loaded by the command is transcoded, not the current file. In addition, because it is real-time transcoding, it is only suitable for use in the development environment.

ES6 Babel Compilation