构建自己习惯的 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 导出你的配置，比如：

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

比如：我自己常用的

{
  "presets": ["@lljj/package"],
  "plugins": [
    ... plugins // 爱配不配
  ]
}

例子

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