Open muwoo opened 6 years ago
一个基本的.babelrc配置可能是这样的:
.babelrc
{ "presets": [ "env", "stage-0" ], "plugins": ["transform-runtime"] }
presets 是babel的一个预设,使用的时候需要安装对应的插件,对应babel-preset-xxx,例如下面的配置,需要npm install babel-preset-env
npm install babel-preset-env
{ "presets": ["env"] }
每年每个 preset 只编译当年批准的内容。 而 babel-preset-env 相当于 es2015 ,es2016 ,es2017 及最新版本。 presets stage stage 代表着ES提案的各个阶段,一共有5个阶段,存在依赖关系。也就是说stage-0是包括stage-1的,以此类推: Stage 0 - 稻草人: 只是一个想法,可能是 babel 插件。 Stage 1 - 提案: 初步尝试。 Stage 2 - 初稿: 完成初步规范。 Stage 3 - 候选: 完成规范和浏览器初步实现。 Stage 4 - 完成: 将被添加到下一年度发布。 plugins 其实看了上面的应该也明白了,presets,也就是一堆plugins的预设,起到方便的作用。如果你不采用presets,完全可以单独引入某个功能,比如以下的设置就会引入编译箭头函数的功能。 { "plugins": ["transform-es2015-arrow-functions"] } 如果你要引入ES6 的所有特性,那么这样一个个写实在是太麻烦了,我们可以预设支持ES6的特性:babel-preset-es2015
每年每个 preset 只编译当年批准的内容。 而 babel-preset-env 相当于 es2015 ,es2016 ,es2017 及最新版本。
stage 代表着ES提案的各个阶段,一共有5个阶段,存在依赖关系。也就是说stage-0是包括stage-1的,以此类推:
其实看了上面的应该也明白了,presets,也就是一堆plugins的预设,起到方便的作用。如果你不采用presets,完全可以单独引入某个功能,比如以下的设置就会引入编译箭头函数的功能。
{ "plugins": ["transform-es2015-arrow-functions"] }
如果你要引入ES6 的所有特性,那么这样一个个写实在是太麻烦了,我们可以预设支持ES6的特性:babel-preset-es2015
babel-preset-es2015
关于transform-runtime 可以参考这里
transform-runtime
Babel支持自定义的预设(presets)或插件(plugins)。如果你的插件在npm上,可以直接采用这种方式"plugins": ["babel-plugin-myPlugin"],当然,你也可以缩写,它和"plugins": ["myPlugin"]是等价的。此外,你还可以采用本地的相对路径引入插件,比如"plugins": ["./node_modules/asdf/plugin"]。
"plugins": ["babel-plugin-myPlugin"]
"plugins": ["myPlugin"]
"plugins": ["./node_modules/asdf/plugin"]
presets同理。
插件中每个访问者都有排序问题。 这意味着如果两次转译都访问相同的”程序”节点,则转译将按照 plugin 或 preset 的规则进行排序然后执行。
一个基本的
.babelrc
配置可能是这样的:presets env
presets 是babel的一个预设,使用的时候需要安装对应的插件,对应babel-preset-xxx,例如下面的配置,需要
npm install babel-preset-env
关于
transform-runtime
可以参考这里自定义预设或插件
Babel支持自定义的预设(presets)或插件(plugins)。如果你的插件在npm上,可以直接采用这种方式
"plugins": ["babel-plugin-myPlugin"]
,当然,你也可以缩写,它和"plugins": ["myPlugin"]
是等价的。此外,你还可以采用本地的相对路径引入插件,比如"plugins": ["./node_modules/asdf/plugin"]
。presets同理。
plugins/presets排序
插件中每个访问者都有排序问题。 这意味着如果两次转译都访问相同的”程序”节点,则转译将按照 plugin 或 preset 的规则进行排序然后执行。