前言:
Babel插件一般尽可能拆成小的力度,开发者可以按需引进。比如对 ES6 转 ES5 的功能,Babel 官方拆成了20+个插件。这样的好处显而易见,既提高了性能,也提高了扩展性。(plugins)
但是!如果当前项目需要用到 ES6 转 ES5 的大部分功能,那么更适合直接引用插件的集合。(presets)
场景
如:es2015可拆分成transform-es2015-arrow-functions、transform-es2015-template-literals等插件
-
presets plugins插件的集合,如['es2015’]
数组,表示插件集合 -
plugins 按需引进,拆成细小粒度的插件,如['transform-es2015-arrow-functions'、'transform-es2015-template-literals']
数组,表示插件。 - babel.config.js 执行顺序
- 先执行plugins,再执行presets
- plugins从左到右,presets从右到左
执行顺序:ABCDE
module.exports = {
presets: [E,D],
plugins: [A,B,C]
}
总结
如果只需要引用插件的部分功能,则通过plugins引入对应插件;若想要引入一个插件集合的绝大部分功能,建议直接使用presets引入该插件集合