Babel
把用最新标准编写的 JavaScript
代码向下编译成可以在今天随处可用的版本。 这一过程叫做“源码到源码”编译, 也被称为转换编译。
由于各大浏览器对 es6
并没有完全的支持,我们开发前端项目时,需要使用 babel
来将 ES6
编译成 ES5
,插件和预设通常写入到配置文件中,可以将配置写入 package.json
的 babel
属性里,或者在根目录下写一个单独的 .babelrc
文件,这个文件就是用来让 Babel
做你要它做的事情。
配置 .babelrc
文件时一般配置如下:
{
"presets": [
"es2015",
"react",
"stage-0"
],
"plugins": []
}
这个配置文件的意思。首先,这个配置文件是针对 babel6
的,babel6
做了一系列模块优化,不像 babel5
一样把所有的内容都加载,默认只提供 babel-core
。原本只需要装一个 babel
,现在必须按照自己的需求配置,灵活性提高的同时也提高了使用者的学习成本。
如果需要编译 ES6
,我们需要设置 presets
包含 es2015
,也就是预先加载 es6
编译的模块。
如果需要编译 jsx
,我们需要设置 presets
包含 react
,也就是预先加载 react
编译的模块。
如果需要编译 ES7
,我们需要设置 presets
包含 stage-0
,也就是预先加载 ES7
编译的模块。
stage不同阶段的区别:
ES7
不同阶段语法提案的转码规则模块(共有四个阶段),分别是 stage-0
stage-1
stage-2
stage-3
。
stage-0
的范围最广大,包含 stage-1
stage-2
以及 stage-3
的所有功能。同时还另外支持如下两个功能插件:
transform-do-expressions
transform-function-bind
stage-1
除了包含 stage-2
和 stage-3
,还包含了下面4个插件:
transform-class-constructor-call
transform-class-properties
transform-decorators
transform-export-extensions
stage-2
除了包含 stage-3
,还包含了下面2个插件:
syntax-trailing-function-commas
transform-object-reset-spread
stage-3
包含了下面2个插件:
transform-async-to-generator
transform-exponentiation-operator
参考文档:
https://www.vanadis.cn/2017/03/18/babel-stage-x/
https://segmentfault.com/a/1190000008159877
http://www.ruanyifeng.com/blog/2016/01/babel.html