Babel: plugin, preset的区别于使用

2018-11-07 本文已影响0人异彩_c7a6

Babel Plugin Preset 的来由

1，{ "plugins": [ "transform-es2015-arrow-functions", "transform-es2015-template-literals" ] }

`npm bin`/babel --plugins transform-es2015-arrow-functions,transform-es2015-template-literals index.js

如果没有预设，babel转化是需要指定用什么插件的，颗粒度小，效率高，但是插件需要逐个安装(babel 官方拆成了20+个插件)。

2，为了解决插件依赖的问题，采用了Babel Preset。(Babel Preset视为Babel Plugin的集合，比如babel-preset-es2015包含所有跟ES6转换有关的插件)

`npm bin`/babel --presets es2015 index.js

多个Plugin和Preset时执行顺序非常重要

1，先执行完所有Plugin，再执行Preset。

2，多个Plugin，按照声明次序顺序执行。

3，多个Preset，按照声明次序逆序执行。

eg: { "plugins": [ "transform-react-jsx", "transform-async-to-generator" ], "presets": [ "es2015", "es2016" ] }

{ "presets": [ "./mypreset.js" ] }

// mypreset.js

module.exports = { presets: [ require("babel-preset-es2015"), ], plugins: [ require("babel-plugin-transform-react-jsx"), ] };

{ "presets": [ presetName01, // 没有配置 [ presetName02, presetOptions02 ] // 有配置 ] }

eg: { "presets": [ ["es2015", { "loose": true, "modules": false }] ] }

1，babel-preset-env 是一个新的 preset，可以根据配置的目标运行环境（environment）自动启用需要的 babel 插件。

babel-preset-es2015(转换为es5)、babel-preset-es2016(转化为es6)、babel-preset-es2017(转化为es7)、babel-preset-latest(转化最新stage4进度)

2，插件越来越多，效率变慢，浏览器升级，提出了 babel-preset-env, 默认配置的情况下，它跟 babel-preset-latest 是等同的，会加载从es2015开始的所有preset。

Eg:{ "presets": [ "env" ] } ===={ "presets": [ “latest" ] }

Eg: 针对node环境{ "presets": [ ["env", { "targets": { "node": "8.9.3" } }] ] }

Eg: 针对ie11{ "presets": [ ["env", { "targets": { "browsers": "ie 11" } }] ] }

Eg: 针对Edge16{ "presets": [ ["env", { "targets": { "browsers": "edge 16" } }] ] }

Eg: 针对Ie8+,chrome62+:{ "presets": [ ["env", { "targets": { "browsers": [ "ie >= 8", "chrome >= 62" ] } }] ] }

Eg: 服务端命令行编译：npm bin browserslist "ie >= 8, chrome >= 62”

3，env 原理

1、首先，检测浏览器对JS特性的支持程度，比如通过通过 compat-table 这样的外部数据。

2、将 JS特性跟特定的babel插件建立映射，映射关系可以参考这里。

3、stage-x 的插件不包括在内。

4、根据开发者的配置项，确定至少需要包含哪些插件。比如声明了需要支持 IE8+、chrome62+，那么，所有IE8+需要的插件都会被包含进去。