Erik's Blog

Babel 简介

(更新于 )Build Tool#Babel

Babel is a JavaScript compiler.

使用 Babel ，可以进行语法转译，将最新的 ES6/ES7 语法转译成通用的 ES5 语法，还可以通过 babel-polyfill 进行代码填充 (兼容性补丁) 。

Babel 支持 JSX 和流式语法扩展，并正式集成了对所有主流工具的支持 (Gulp / Browserify / Ember / Meteor 等) 。

配置 Babel

Babel 的所有工作都是通过插件来完成的，可以通过安装插件（plugins）或预设（presets，也就是一组插件）来指示 Babel 去做什么事情。 一般推荐使用 .babelrc 文件配置 Babel。.babelrc 文件使用 JSON 格式，presets 字段包含使用的语法标准，plugins 字段包含使用的插件，

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

使用 babel-preset-es2015 兼容 ES6 语法

安装 : npm i -D babel-preset-es2015 配置 : presets 加入 “es2015”

babel-preset-react

安装 : babel-preset-react 配置 : presets 加入 “react”

使用 babel-preset-stage-x 兼容 ES7 语法

state 分为 0-3 四个阶段。每种预设都依赖于紧随的后期阶段预设 (stage-1 依赖 stage-2，stage-2 依赖 stage-3)。

安装 : npm i -D babel-preset-stage-2 配置 : presets 加入 “stage-2”

使用 Babel

安装并配置好 .babelrc 文件后，就可以开始使用了。你可以通过 CLI 方式，或者以编程的方式来使用 Babel。

babel-cli

全局安装 : npm i -g babel-cli 不推荐 编译 : babel file.js 指定输出 : babel example.js -o compiled.js 编译目录 : babel src -d lib

使用 Babel 的本地版本：

安装 : npm i -D babel-cli 推荐 修改 package.json “scripts” 字段

"scripts": {
  "build": "babel src -d lib"
}

运行 : npm run build

babel-core

以编程的方式来使用 Babel，可以使用 babel-core 这个包。

安装 : npm i -D babel-core 使用 : options

// 引入
var babel = require("babel-core");

// 字符串形式的 JavaScript 代码可以直接使用 babel.transform 来编译。
babel.transform("code();", options);
// => { code, map, ast }

// 文件的话，可以使用异步或者是同步 api：
babel.transformFile("filename.js", options, function(err, result) {
  result; // => { code, map, ast }
});
babel.transformFileSync("filename.js", options);
// => { code, map, ast }


// 已有 Babel AST 可以直接从 AST 进行转换:
babel.transformFromAst(ast, code, options);
// => { code, map, ast }

执行 Babel 生成的代码

babel-polyfill 代码填充 (兼容性补丁)

Babel 依靠单独的编译不能支持 ES6 的全部特性，它还需要一些运行时的支持，尤其是像 Set，Map，Promise 必须要被内核支持， Babel的生成器的实现也使用了若干个运行时 helper，这使得你的 App 不用和别的 App 使用同样的环境，你可以使用 babel-polyfill 来让你的浏览器实现所有 ES6 功能

安装 : npm i --save babel-polyfill 使用 : import "babel-polyfill";

babel-runtime

Babel 也提供了一些 helper 到你的解释代码中，这对单文件是没问题的，但是，当我们使用 webpack 打包的时候，重复的代码会影响到最后产生的文件的大小。 可以通过使用 babel-runtime 和 transform-runtime 来代替那些 helper。

安装 : npm i -D babel-plugin-transform-runtime npm i --save babel-runtime 使用 : “plugins” 字段添加 “transform-runtime”

Babel 配置进阶

手动指定插件

babeljs npmjs 自己编写插件

安装 : npm i -D babel-plugin-transform-es2015-classes 配置 : plugins 添加 “transform-es2015-classes”

基于环境自定义 Babel

当前环境可以使用 process.env.BABEL_ENV 来获得。 如果 BABEL_ENV 不可用，将会替换成 NODE_ENV，并且如果后者也没有设置，那么缺省值是 “development”。

{
"presets": ["es2015"],
"plugins": [],
"env": {
  "development": {
    "plugins": [...]
  },
  "production": {
    "plugins": [...]
  }
}
}

制作自己的预设 (preset)

Babel 预设就是一些预先配置好的插件的集合，如果你想要做一些不一样的事情你会手动去设定插件，这和使用预设几乎完全相同。

package.json :

{
  "name": "babel-preset-my-awesome-preset",
  "version": "1.0.0",
  "author": "James Kyle <me@thejameskyle.com>",
  "dependencies": {
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babel-plugin-transform-flow-strip-types": "^6.3.15"
  }
}

index.js :

module.exports = {
  presets: [
    require("babel-preset-es2015"),
    require("babel-preset-react")
  ],
  plugins: [
    require("babel-plugin-transform-flow-strip-types")
  ]
};

然后将 babel-preset-* 包发布到 npm 上即可。

Babel 和其他工具

静态分析工具

eslint 和 babel-eslint。

安装 : npm i -D eslint babel-eslint 配置 : 创建或使用项目现有的 .eslintrc 文件并设置 parser 为 babel-eslint。

{
"parser": "babel-eslint",
"rules": {
  ...
}
}

添加一个 lint 任务到 npm 的 package.json 脚本中：

{
"name": "my-module",
"scripts": {
  "lint": "eslint my-files.js"
},
"devDependencies": {
  "babel-eslint": "...",
  "eslint": "..."
}
}

运行 : npm run lint

代码风格

JSCS 自己通过 –esnext 选项实现了这种集成

使用 :

  1. jscs . --esnext

  2. .jscsrc 文件里添加 esnext 选项:

{
"preset": "airbnb",
"esnext": true
}