http://babeljs.io/docs/plugins/
我们看到了Packages(包), 它分为了三个,babel-core,babel-polyfill, Plugins,这些都是一个一个单独的包.
今天就讲第3个包Plugins(编码转换工具)。
一、Babel是一个编译器.
At a high level, 在运行代码时有3个阶段:解析, 转换, 生成目标代码 (l像许多其它编译器一样).
对一些 极好的/简单的 在编译器的向导, check out the-super-tiny-compiler, which also explains how Babel itself works on a high level.
现在, out of the box Babel 并不做任何事. 它基本上看起来像 const babel = code => code;
通过解析代码,然后返回来又产生同样的代码 ,j就是什么也没做。
你将需要为Babel 增加一些插件去做一些事情(他们影响第二阶段,转换).
不知道从哪里开始? Check out some of our presets.
Presets:有两种,一个是按年份(babel-preset-2017),一个是按阶段(babel-preset-stage-0)。
.babelrc
配置里的Presets共享一组babel插件。Official Presets
我们已经为公共环境组装了一些。
二、插件分类
每年的Presets只编译当年批准的内容。
babel-preset-env
代替 es2015, es2016, es2017, latest。
1、 插件按年分:
许多其它的团体维护presets在on npm是可利用的!
2、按阶段分
经过多阶段Stage-X,(实验Presets)
在 in stage-x presets 的任何转换
任何转变在stage-x预设是语言变化,还没有被批准成为JavaScript发行版的一部分(such as ES6/ES2015)
“语言的变化是通过一个过程的方式来发展的,它为发展增加一个事物提供一个指导,从一个思想到全部具体的特征。
“Changes to the language are developed by way of a process which provides guidelines for evolving an addition from an idea to a fully specified feature”
可能改变
这些建议遭受改变,所以要格外小心使用。尤其是前三期,在每一个TC39会议后,如果可能,我们计划更新 stage-x presets 。
The TC39会议 把建议 分成 下面 几个阶段:
- Stage 0 - 想阶段: just an idea, possible Babel plugin.
- Stage 1 - 建议阶段: this is worth working on.
- Stage 2 - 草稿: initial spec.
- Stage 3 - 选的阶段: complete spec and initial browser implementations.
- Stage 4 - 完成: will be added to the next yearly release
三、转换Plugins
这些plugins 把transformations 应用到代码中。Transform plugins将启动相应的语法plugin ,因此你必须指定两者。
以 es2015-computed-properties为例:编译ES2015 computed properties 到ES5
1、源码 varobj={["x" + foo]: "heh", ["y" + bar]: "noo", foo: "foo", bar: "bar" };
2、转换后的ES5,能在各种环境下使用。
var _obj; function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } var obj = ( _obj = {}, _defineProperty(_obj, "x" + foo, "heh"), _defineProperty(_obj, "y" + bar, "noo"), _defineProperty(_obj, "foo", "foo"), _defineProperty(_obj, "bar", "bar"), _obj );
3、安装插件npm install --save-dev babel-plugin-transform-es2015-computed-properties4、用插件,主要用在3个地方:1> .babelrc
不带参数:
{
"plugins": ["transform-es2015-computed-properties"]
}
带参数:
{
"plugins": [
["transform-es2015-computed-properties", {
"loose": true
}]
]
}2>用在命令行, CLIbabel --plugins transform-es2015-computed-properties script.js3>用在 Node API
require("babel-core").transform("code", {
plugins: ["transform-es2015-computed-properties"]});
Options
loose
boolean
, 默认false
像方法在类中赋值一样, in loose 模式, 使用简单的赋值计算属性名字,而不是去定义。
Example:
源码javascript
var obj = {
["x" + foo]: "heh",
["y" + bar]: "noo",
foo: "foo",
bar: "bar"
};转换后的javascript
var _obj;
var obj = (
_obj = {},
_obj["x" + foo] = "heh",
_obj["y" + bar] = "noo",
_obj.foo = "foo",
_obj.bar = "bar",
_obj
);
四、下面是所有的转码插件:ES3
ES5
ES2015
- check-es2015-constants
- es2015-arrow-functions
- es2015-block-scoped-functions
- es2015-block-scoping
- es2015-classes
- es2015-computed-properties
- es2015-destructuring
- es2015-duplicate-keys
- es2015-for-of
- es2015-function-name
- es2015-literals
- es2015-object-super
- es2015-parameters
- es2015-shorthand-properties
- es2015-spread
- es2015-sticky-regex
- es2015-template-literals
- es2015-typeof-symbol
- es2015-unicode-regex
ES2016
ES2017
Modules
Experimental
- async-generator-functions
- async-to-module-method
- class-constructor-call (deprecated)
- class-properties
- decorators
- do-expressions
- export-extensions
- function-bind
- object-rest-spread
Minification
Check out our minifier based on Babel!
These plugins are in the minify repo.
- inline-environment-variables
- inline-consecutive-adds
- member-expression-literals
- merge-sibling-variables
- minify-booleans
- minify-constant-folding
- minify-dead-code-elimination
- minify-flip-comparisons
- minify-guarded-expressions
- minify-infinity
- minify-mangle-names
- minify-numeric-literals
- minify-replace
- minify-simplify
- minify-type-constructors
- node-env-inline
- property-literals
- regexp-constructors
- remove-console
- remove-debugger
- simplify-comparison-operators
- undefined-to-void
React
- react-constant-elements
- react-display-name
- react-inline-elements
- react-jsx
- react-jsx-compat
- react-jsx-self
- react-jsx-source
Other
- eval
- flow-comments
- flow-strip-types
- jscript
- object-assign
- object-set-prototype-of-to-assign
- proto-to-assign
- regenerator
- runtime
- strict-mode
Misc Plugins