插件
Babel 是一个编译器(源代码=>输出代码)。像许多其他编译器一样,它分三个阶段运行:解析,转换和生成新代码。
现在,开箱即用的 Babel 没有做任何事情。通过解析代码,基本上像 const babel = code => code;
,然后再次生成相同的代码。所以做任何事你都需要添加 Babel 插架来实现。
可以在 preset 中启用一组插件,而不是单独的插件。
转换插件
这些插件将把转换应用到你的代码中。
转换插件将启用相应的语法插件,因此不必同时指定它们。
ES3
ES5
ES2015
- arrow-functions
- block-scoped-functions
- block-scoping
- classes
- computed-properties
- destructuring
- duplicate-keys
- for-of
- function-name
- instanceof
- literals
- new-target
- object-super
- parameters
- shorthand-properties
- spread
- sticky-regex
- template-literals
- typeof-symbol
- unicode-regex
ES2016
ES2017
ES2018
- async-generator-functions
- dotall-regex
- object-rest-spread
- optional-catch-binding
- unicode-property-regex
模块
试验阶段
- class-properties
- decorators
- do-expressions
- export-default-from
- export-namespace-from
- function-bind
- function-sent
- logical-assignment-operators
- nullish-coalescing-operator
- numeric-separator
- optional-chaining
- pipeline-operator
- throw-expressions
简化
查看 基于 Babel 的简化!
这些插件都在 minify repo 中。
- inline-consecutive-adds
- inline-environment-variables
- member-expression-literals
- merge-sibling-variables
- minify-booleans
- minify-builtins
- 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
- remove-undefined
- 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
其他
- external-helpers
- flow-strip-types
- jscript
- object-assign
- object-set-prototype-of-to-assign
- proto-to-assign
- regenerator
- runtime
- strict-mode
- typescript
语法插件
这些插件允许 Babel parse 特定类型的语法(不是转换)。
注意:转换插件会自动启用相应的语法插件。因此,如果已经使用了相应的转换插件,则无需指定语法插件。
或者,也可以从 Babel 解析器中的 plugins
选项提供。
你的 .babelrc
:
{
"parserOpts": {
"plugins": ["jsx", "flow"]
}
}
插件/Preset 路径
如果插件是在 npm 上,可以写入插件的名称,babel 将检查它是否已安装在 node_modules
中。
{
"plugins": ["babel-plugin-myPlugin"]
}
也可以指定插件的相对/绝对路径。
{
"plugins": ["./node_modules/asdf/plugin"]
}
插件简写
如果包的名称以 babel-plugin-
为前缀,可以使用简写:
{
"plugins": [
"myPlugin",
"babel-plugin-myPlugin" // 等同
]
}
也适用于范围包:
{
"plugins": [
"@org/babel-plugin-name",
"@org/name" // 等同
]
}
插件顺序
指定插件每个访问者的事项
这意味着如果两个转换器都访问同一个“ Program ”节点,则转换器将以插件或 preset 顺序运行。
- 插件在 Presets 前运行。
- 插件可以指定从头到尾的顺序。
- Preset 顺序是相反的 (从后到前).
例如:
{
"plugins": [
"transform-decorators-legacy",
"transform-class-properties"
]
}
将会运行 transform-decorators-legacy
然后是 transform-class-properties
。
关于 presets 一定要记住,顺序是相反的。如下:
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
按以下顺序运行:@babel/preset-react
再运行 @babel/preset-env
。
插件选项
插件和 presets 都可以通过将名称和选项对象放在在配置中的数组中来指定选项。
对于不指定选项,这些都是等效的:
{
"plugins": [
"pluginA",
["pluginA"],
["pluginA", {}],
]
}
要指定选项,输入一个选项名作为 key 的对象。
{
"plugins": [
["transform-async-to-module-method", {
"module": "bluebird",
"method": "coroutine"
}]
]
}
presets 的选项设置相同:
{
"presets": [
["env", {
"loose": true,
"modules": false
}]
]
}
插件开发
了解如何创建自己的插件,请参阅优秀的 babel-handbook。
简单的反转名称插件(来自主页):
export default function () {
return {
visitor: {
Identifier(path) {
const name = path.node.name;
// reverse the name: JavaScript -> tpircSavaJ
path.node.name = name.split("").reverse().join("");
}
}
};
}