自定义 Babel preset

[gnosis23]

自定义 Babel presets

参考官网教程

一个例子

module.exports = () => ({
  presets: [
    require("@babel/preset-env"),
  ],
  plugins: [
    [require("@babel/plugin-proposal-class-properties"), { loose: true }],
    require("@babel/plugin-proposal-object-rest-spread"),
  ],
});

路径

可以用据对路径、想对路径，或者直接 require 包的名字

例子

• babel-preset-react-app

polyfills

一般的 preset 如 babel-preset-env 是不带 polyfill 的，需要你自己引入 core-js 这样的包。

• react-app-polyfill

[gnosis23]

@babel/preset-env

内部通过 browserlist 来选择性进行 polyfill

支持的选项：

• useBuiltIns: 这个选项会将 import('core-js') 替换为具体的文件，而不是完全引用。 一般选择 entry 和 usage 两个。entry 表示只要在入口定义 'core-js' 它自动帮你转化为具体的 import ，usage 表示在需要用到 polyfill 的地方倒入相关 import 。
• corejs 版本
• modules
• targets 计划打包到环境，支持 browserlist 字符串

@babel/preset-react

要用 react 的话需要

[gnosis23]

plugins

下面列出几个值得注意个插件

• babel-plugin-macros 有意思
• @babel/plugin-proposal-optional-chaining (.?) CRA内置
• @babel/plugin-proposal-nullish-coalescing-operator (??) CRA内置
• @babel/plugin-syntax-dynamic-import ( import() ) CRA内置

[gnosis23]

Polyfills

• core-js
• regenerator-runtime
• fetch
• object.assign
• ...