构建自己习惯的 babel preset

日常见过比较多的 babel-preset-vue@babel/preset-react,简单理解 preset 最终就是确定一个 babel 插件的集合,那你可以通过多种配置告诉 babel 你需要开启那些插件。

这里整个配置的思想和构建自己常用的eslint风格是一致的。

创建一个preset

这里首先你也要先创建一个package 方便推送到npm。

包名也必须以 babel-preset-* 开头,或者 scoped modules 以 @scope/babel-preset 前缀命名,规则和共享eslint一致。

这里需要配置 package.json dependencies 字段申明你的依赖。

然后一样创建index.js 导出你的配置,比如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
module.exports = () => ({
presets: [
[require('@babel/preset-env'), {
targets: {
browsers: ['last 2 versions', 'ie >=9']
},
modules: false
}]
],
plugins: [
require("@babel/plugin-syntax-dynamic-import"),
[require("@babel/plugin-proposal-decorators"), { legacy: true }],
[require("@babel/plugin-proposal-class-properties"), { loose: true }], // 松散模式
require("@babel/plugin-proposal-object-rest-spread")
]
});

发布你的preset

这里也是发布到npm,方法和 eslint 共享配置一致不在介绍。

使用你的preset

使用和你使用其它preset一样,配置你的 .babelrc

比如:我自己常用的

1
2
3
4
5
6
{
"presets": ["@lljj/package"],
"plugins": [
... plugins // 爱配不配
]
}

例子

一个构建babel preset的例子:@lljj/babel-preset