babel
Babel 是一个通用的多用途 JavaScript 编译器。通过 Babel 你可以使用(并创建)下一代的 JavaScript,以及下一代的 JavaScript 工具。 作为一种语言,JavaScript 在不断发展,新的标准/提案和新的特性层出不穷。 在得到广泛普及之前,Babel 能够让你提前(甚至数年)使用它们。
Babel 把用最新标准编写的 JavaScript 代码向下编译成可以在今天随处可用的版本。 这一过程叫做“源码到源码”编译, 也被称为转换编译(transpiling,是一个自造合成词,即转换+编译。以下也简称为转译)。 Babel 的用途并不止于此,它支持语法扩展,能支持像 React 所用的 JSX 语法,同时还支持用于静态类型检查的流式语法(Flow Syntax)。
# 安装
npm install --global babel-cli
npm install --save-dev babel-register
npm install babel-core
npm install --save babel-polyfill
npm install --save-dev babel-plugin-transform-runtime
npm install --save babel-runtime
直接使用:
- babel-register 入口文件 register.js 引入 babel-register,就可以直接运行
node register.js
,不适用正式环境 - babel-core 以编程的方式来使用 Babel,可以直接将源码转换成目标代码和 AST,或者从 AST 转换
如何配置
babel 只是一个编译器,我们需要配置插件或者 preset 来告诉 babel 来做什么。
在根目录下面添加 .babelrc
文件
{
"presets": [
"es2015",
"react",
"stage-2"
],
"plugins": [
"transform-runtime",
["transform-es2015-classes", { "loose": true }]
],
"env": {
"development": {
"plugins": [...]
},
"production": {
"plugins": [...]
}
}
preset 是什么
preset 是一系列插件的集合,如 preset es2015 就包含了插件 transform-es2015-classes
,插件也可以配置参数。
可以基于环境配置不同的插件。
常用的 preset:
- babel-preset-es2015 将 ES6 语法编译成 ES5 语法
- babel-preset-react 编译 react 语法
babel-preset-stage-x
- babel-preset-stage-0
- babel-preset-stage-1
- babel-preset-stage-2
babel-preset-stage-3
JavaScript 还有一些提案,正在积极通过 TC39(ECMAScript 标准背后的技术委员会)的流程成为标准的一部分。这个流程分为 5(0-4)个阶段。 随着提案得到越多的关注就越有可能被标准采纳,于是他们就继续通过各个阶段,最终在阶段 4 被标准正式采纳
babel-polyfill
Babel 几乎可以编译所有时新的 JavaScript 语法,但对于 APIs 来说却并非如此。
function addAll() {
return Array.from(arguments).reduce((a, b) => a + b);
}
如 babel 能将箭头函数编译成 function 的形式,但是不能编译新的 api 如 Array.from
。
为了解决这个问题,我们使用一种叫做 Polyfill(代码填充,也可译作兼容性补丁) 的技术。 简单地说,polyfill 即是在当前运行环境中用来复制(意指模拟性的复制,而不是拷贝)尚不存在的原生 api 的代码。 能让你提前使用还不可用的 APIs,Array.from 就是一个例子。
Babel 用了优秀的 core-js 用作 polyfill,并且还有定制化的 regenerator 来让 generators(生成器)和 async functions(异步函数)正常工作。
安装:
npm install --save babel-polyfill
使用:
// 在文件顶部导入
import "babel-polyfill";
Polyfill 是什么
Poly meaning it could be solved using any number of techniques - it wasn't limited to just being done using JavaScript, and fill would fill the hole in the browser where the technology needed to be. Ployfilla is a UK product known as Spackling Paste in the US. think of the browsers as a wall with cracks in it. These polyfills help smooth out the cracks and give us a nice smooth wall of browsers to work with.
core-js 是什么
- 它是JavaScript标准库的polyfill
- 它尽可能的进行模块化,让你能选择你需要的功能
- 它可以不污染全局空间
- 它和babel高度集成,可以对core-js的引入进行最大程度的优化
babel-runtime
为了实现 ECMAScript 规范的细节,Babel 会使用“助手”方法来保持生成代码的整洁。 由于这些助手方法可能会特别长并且会被添加到每一个文件的顶部,因此你可以把它们统一移动到一个单一的“运行时(runtime)”中去。
其实就是将一些工具方法统一放到 babel-runtime 里面,然后编译之后的文件从 babel-runtime 来导入这些公用方法。
安装:
npm install --save-dev babel-plugin-transform-runtime
npm install --save babel-runtime
使用:
{
"plugins": [
+ "transform-runtime",
"transform-es2015-classes"
]
}
babel 和其他工具集成
编写 babel 插件
babel 的处理步骤:
- 解析(parse),接收代码生成 AST
- 转换(transform),接收 AST 并对其进行遍历,在此过程中对节点进行添加、更新及移除等操作。
- 递归进行树形遍历 AST
生成(generate),步骤把最终(经过一系列转换之后)的 AST 转换成字符串形式的代码,同时还会创建源码映射(source maps)。
集成 eslint