一个广泛使用的转码器--Babel

参考：

Babel

Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行

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

 

配置文件

---

 

配置文件是.babelrc，存放在项目的根目录下。使用Babel的第一步，就是配置这个文件

<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模块改写require命令，为它加上一个钩子。此后，每当使用require加载.js、.jsx、.es和.es6后缀名的文件，就会先用Babel进行转码

　　$ npm install --save-dev babel-register

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

　　require("babel-register");

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

然后，就不需要手动对index.js转码了。

需要注意的是，babel-register只会对require命令加载的文件转码，而不会对当前文件转码。另外，由于它是实时转码，所以只适合在开发环境使用

 

 

babel-core

---

 

如果某些代码需要调用Babel的API进行转码，就要使用babel-core模块。

安装命令 :  $ npm install babel-core --save ,  然后，在项目中就可以调用babel-core。

 

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

// 字符串转码
babel.transform('code();', options);
// => { code, map, ast }

// 文件转码（异步）
babel.transformFile('filename.js', options, function(err, result) {
 result; // => { code, map, ast }
});

// 文件转码（同步）
babel.transformFileSync('filename.js', options);
// => { code, map, ast }

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

 

配置对象options，可以参看官方文档http://babeljs.io/docs/usage/options/

下面是一个例子。
　　var es6Code = 'let x = n => n + 1';
　　var es5Code = require('babel-core').transform(es6Code, {
   　　　　presets: ['es2015']
 　　})
上面代码中，transform方法的第一个参数是一个字符串，表示需要转换的ES6代码，第二个参数是转换的配置对象。

 

 

babel-polyfill

---

 

Babel默认只转换新的JavaScript句法（syntax），而不转换新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码。

解决方案：使用babel-polyfill，为当前环境提供一个垫片

$ npm install --save babel-polyfill

在脚本头部，加入如下一行代码：

import 'babel-polyfill';
// 或者
require('babel-polyfill');

 

以上是一个广泛使用的转码器--Babel的详细内容。更多信息请关注PHP中文网其他相关文章！