Babel与ES6转换-优快云博客

ECMAScript和javascript的关系：

ECMAScript是javascript的规格，javascript是ECMAScript的其中一种实现，使用 ECMAScript规范的还有Jscript和ActionScript。

兼容ES6：

使用babel，jsx，traceur，es6-shim等转码器。

使用Babel：

1.全局安装：

babel的配置文件是.babelrc（放在根目录下），用来配置转码规则和插件，基本格式为

   {
  "presets": [],    //转码规则
  "plugins": []
}

官方提供以下的规则集，根据需要安装

    # 最新转码规则
$ npm install --save-dev babel-preset-latest
# react 转码规则
$ npm install --save-dev babel-preset-react
# 不同阶段语法提案的转码规则（共有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

语法提案的五个阶段：
Stage 0 - Strawman（展示阶段）
Stage 1 - Proposal（征求意见阶段）
Stage 2 - Draft（草案阶段）
Stage 3 - Candidate（候选人阶段）
Stage 4 - Finished（定案阶段）

规则加入.babelrc

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

安装babel-cli

     全局安装：
$ npm install --global babel-cli
基本用法如下：
# 转码结果输出到标准输出
$ babel example.js
# 转码结果写入一个文件
# --out-file 或 -o 参数指定输出文件
$ babel example.js --out-file compiled.js
# 或者
$ babel example.js -o compiled.js
# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
$ babel src --out-dir lib
# 或者
$ babel src -d lib
# -s 参数生成source map文件
$ babel src -d lib -s

2.将babel-cli安装在项目中：

     # 安装
$ npm install --save-dev babel-cli
#改写package.json
{
  "devDependencies": {
    "babel-cli": "^6.0.0"
  },
  "scripts": {
    "build": "babel src -d lib"
  },
}
#转码
$ npm run build

3.一些插件：

babel-node：提供ES6的REPL环境（“读取-求值-输出”循环 Read-Eval-Print Loop，是一个简单的，交互式的编程环境）

使用：babel-node替代node，script.js不用做任何转码处理

      $ babel-node es6.js
#也可以安装在项目中：
$ npm install --save-dev babel-cli
#改写package.json：
{
  "scripts": {
    "script-name": "babel-node script.js"
  }
}

babel-register：使用require加载.js/.jsx/.es/.es6后缀名文件，就会先使用babel进行转码，而无需手动转码后再引入，但是babel-register只会对require的文件转码，不对当前文件转码，并且为实时转码，只适用于开发环境。

        #安装
$ npm install --save-dev babel-register
#加载babel-register
require("babel-register");
require("./index.js");

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 }

4.浏览器环境：

babel6.0开始不直接提供浏览器版本，需要用构建工具构建出来，浏览器版本可以使用babel-standalone模块，但性能有影响：

     <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.4.4/babel.min.js"></script>
<script type="text/babel">
// Your ES6 code
</script>

代码打包成浏览器可以使用的版本（babel配合browserify）：

      #安装babelify
$ npm install --save-dev babelify babel-preset-latest
#转换ES6脚本，将script.js转为bundle.js，浏览器直接加载bundle.js
$  browserify script.js -o bundle.js \
  -t [ babelify --presets [ latest ] ]
#package.json中配置参数，就不需要每次都输入参数了
{
  "browserify": {
    "transform": [["babelify", { "presets": ["latest"] }]]
  }
}

在线转换器：

babel提供的REPL在线编辑器：

https://babeljs.io/repl/#?babili=false&evaluate=true&lineWrap=false&presets=es2015%2Creact%2Cstage-2&targets=&browsers=&builtIns=false&debug=false&code=

Traceur在线转码器：

http://google.github.io/traceur-compiler/demo/repl.html#

使用Traceur

1.Traceur将ES6直接插入网页：

     <script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script>
<script src="https://google.github.io/traceur-compiler/bin/BrowserSystem.js"></script>
<script src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script>
<script type="module">
  import './Greeter.js';
</script>

2.Traceur命令行转换：

      #安装
$ npm install -g traceur
#将ES6转为ES5
$ traceur --script calc.es6.js --out calc.es5.js --experimental

3.Traceur 的 Node用法：

      var traceur = require('traceur');
var fs = require('fs');
// 将ES6脚本转为字符串
var contents = fs.readFileSync('es6-file.js').toString();
var result = traceur.compile(contents, {
  filename: 'es6-file.js',
  sourceMap: true,
  // 其他设置
  modules: 'commonjs'
});
if (result.error)
  throw result.error;
// result对象的js属性就是转换后的ES5代码
fs.writeFileSync('out.js', result.js);
// sourceMap属性对应map文件
fs.writeFileSync('out.js.map', result.sourceMap);