A widely used transcoder--Babel

Reference:

Babel

Babel is a widely used transcoder that can convert ES6 code to ES5 code, thereby in existing Environment execution

// 转码前
input.map(item => item + 1);// 转码后
input.map(function (item) {  return item + 1;});

Configuration file

---

The configuration file is .babelrc, stored in the root directory of the project. The first step to use Babel is to configure this file

<span style="color: #888888"><code class=" language-javascript"><span class="token punctuation">{  <span class="token string">"presets"<span class="token punctuation">: <span class="token punctuation">[<span class="token punctuation">]<span class="token punctuation">,  <span class="token string">"plugins"<span class="token punctuation">: <span class="token punctuation">[<span class="token punctuation">]<span class="token punctuation">}<br/><br/><strong><code>presets</code>字段  </strong>设定转码规则，官方提供以下的规则集，你可以根据需要安装<br/></span></span></span></span></span></span></span></span></span></span></span></code></span>

# ES2015转码规则
$ npm install --save-dev babel-preset-es2015# react转码规则
$ npm install --save-dev babel-preset-react# ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个
$ 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

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

babel-register

---

babel-register module rewrites the require command and adds a hook to it. From now on, whenever require is used to load files with .js, .jsx, .es and .es6 suffixes, Babel will be used to transcode them first

　$ npm install --save- dev babel-register

When used, babel-register must be loaded first

require("babel-register");

require("./index.js?1.1.11");

Then, there is no need to manually transcode index.js.

It should be noted that babel-register will only transcode the file loaded by the require command, not the current file. In addition, since it is real-time transcoding, it is only suitable for use in the development environment

babel-core

---

If some code needs to call Babel’s API for transcoding, the babel-core module must be used.

Installation command: $ npm install babel-core --save , Then, babel-core can be called in the project.

var babel = require('babel-core');

// String transcoding
babel.transform('code();', options);
// => { code, map, ast }

// File transcoding (asynchronous)
babel.transformFile('filename.js', options, function(err, result) {
result ; // => { code, map, ast }
});

// File transcoding (synchronization)
babel.transformFileSync('filename.js', options);
// => { code, map, ast }

// Babel AST transcoding
babel.transformFromAst(ast, code, options);
// => { code, map, ast }

To configure object options, please refer to the official document http://babeljs.io/docs/usage/options/

below is an example.
var es6Code = 'let x = n => n + 1';
var es5Code = require('babel-core').transform(es6Code, {
　　　presets: ['es2015']
　})
In the above code, the first parameter of the transform method is a A string representing the ES6 code that needs to be converted. The second parameter is the converted configuration object.

babel-polyfill

---

Babel only converts new ones by default JavaScript syntax (syntax) without converting new APIs, such as Iterator, Generator, Set, Maps, Proxy, Reflect, Symbol, Promise and other global objects, as well as some methods defined on global objects (such as Object.assign) Will not transcode.

Solution: Use babel-polyfill to provide a shim for the current environment

$ npm install --save babel- polyfill

In the head of the script, add the following line of code:

import 'babel-polyfill';
// Or
require('babel-polyfill');

The above is the detailed content of A widely used transcoder--Babel. For more information, please follow other related articles on the PHP Chinese website!