ES6学习笔记（1）——Babel 转码器

ECMAScript 6简介

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

//查看已经实现的es6特性
$ node --v8-options | grep harmony
//查看你正在使用的node对es6的支持程度
$ npm install -g es-checker
$ es-checker

Babel 转码器

配置.babelrc

//1. 设置转码规则和插件
{"presets": [],"plugins": []
}

//2. 安装presets字段设定转码规则# 最新转码规则
$ 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

 //3. 将这些规则加入
{"presets": ["latest","react","stage-2"],"plugins": []}

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

全局安装

$ npm install --global 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

babel-node

基本用法

//进入REPL环境
$ babel-node//运行ES6 语法的代码或脚本
> (x => x * 2)(1)
2//直接运行ES6脚本
$ babel-node es6.js
2//退出 REPL 环境
$ .exit//相关指令
$ .help		//帮助指令
$ .editor 	//编辑模式指令,在此模式下可以编写多行命令
$ .save 	//把在 REPL 环境中执行的指令，一次性输出保存到指定文件中
$ .load		//会加载指定的 js 文件并执行

安装到项目中

$ npm install --save-dev babel-cli

//改写package.json
{"scripts": {"script-name": "babel-node script.js"}
}
//使用babel-node替代node，这样script.js本身就不用做任何转码处理

babel-register

安装

$ npm install --save-dev babel-register

加载与使用

require("babel-register");
require("./index.js");//然后，就不需要手动对index.js转码了

babel-core

安装

$ npm install babel-core --save

调用

var babel = require('babel-core');// 字符串转码：transform()
babel.transform('code();', options);// 文件转码（异步）：transformFile()
babel.transformFile('filename.js', options, function(err, result) {result;
});// 文件转码（同步）：transformFileSync()
babel.transformFileSync('filename.js', options);// Babel AST转码：transformFromAst()
babel.transformFromAst(ast, code, options);

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

一个例子

var es6Code = 'let x = n => n + 1';
var es5Code = require('babel-core').transform(es6Code, {presets: ['latest']}).code;
// '"use strict";\n\nvar x = function x(n) {\n  return n + 1;\n};'

babel-polyfill

安装

$ npm install --save babel-polyfill

使用

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

Babel 默认不转码的 API 非常多，详细清单可以查看babel-plugin-transform-runtime模块的definitions.js文件。

浏览器环境

//实时转码
<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 脚本
$  browserify script.js -o bundle.js \-t [ babelify --presets [ latest ] ]//将ES6脚本`script.js`，转为`bundle.js`，浏览器直接加载后者就可以了
//改写package.json可以不用每次命令行都输入参数{"browserify": {"transform": [["babelify", { "presets": ["latest"] }]]}
}

在线转换

Babel 提供一个REPL在线编译器，可以在线将 ES6 代码转为 ES5 代码。转换后的代码，可以直接作为 ES5 代码插入网页运行。

与其他工具的配合

许多工具需要 Babel 进行前置转码

//ESLint安装
$ npm install --save-dev eslint babel-eslint//根目录下新建配置.eslintrc
{"parser": "babel-eslint","rules": {...}
}//改写package.json{"name": "my-module","scripts": {"lint": "eslint my-files.js"},"devDependencies": {"babel-eslint": "...","eslint": "..."}}    

//Mocha 测试框架
//如果需要执行使用 ES6 语法的测试脚本,修改package.jsond的scripts.test"scripts": {"test": "mocha --ui qunit --compilers js:babel-core/register"
}//`--compilers`参数指定脚本的转码器，规定后缀名为`js`的文件，都需要使用`babel-core/register`先转码