关于Babel的两个解决方案

@babel/preset-env

基本使用：

  1. config:

    1. {
    2. "presets": [
    3.  ["@babel/preset-env", 
    4.    {
    5.      "useBuiltIns": "usage",
    6.      "corejs": 3,
    7.      "targets": ...
    8.    }
    9.  ]
    10. ]
    11. }

  2. 文件入口处添加: import ‘core-js’

效果：操作符转化，按targets按需引入 core-js 中包含的 polyfill。
entry 按照targets，或bowerlist，保证覆盖面积全， 但是打包体积自然就大，
useage 可以按需引入 polyfill, 打包体积就小， 但如果打包忽略node_modules 时如果第三方包未转译则会出现兼容问题

@babel/plugin-transform-runtime

安装：
yarn add —dev @babel/plugin-transform-runtime
yarn add @babel/runtime-corejs3

  1. {
  2.   "plugins": [
  3.     [ 
  4.       "@babel/plugin-transform-runtime", {
  5.         corejs: { version: 3, proposals: true },
  6.         version: '^7.11.2',
  7.       },
  8.     ]
  9.   ]
  10. }

@babel/runtime-corejs3：相当于在@babel/runtime的基础上，还可使用corejs。
corejs: 指定是否使用corejs3，以及是否兼容还处于 proposal 阶段的功能。
version: 指定当前安装的 runtime-corejs3 的版本，可以获得更多功能。
image.png
区别：
env需要指定 import ‘core-js’，切会更具 targets 修改 polyfill 的按需导入。polyfill 会在全局生效，只使用env即可实现基本所有的polyfill。
runtime 不需要引入 ‘core-js’，不识别环境（targets不生效），使用了需要 polyfill 的 api 及导入，polyfill 只局部生效，但若需要处理 yield，async等，依旧需要借助 env。相当于相对 env 更安全的方式，所以只需要在自有库中使用即可。
image.png
image.png
https://github.com/babel/babel/issues/10008
简单点就是。
开发一个 npm 包，使用 runtime，加使用默认配置的 env。
自己的项目，使用 env，并配置 useBuildIn。
image.png
之后会有更好的解决方案，看这里：
https://github.com/babel/babel-polyfills

@babel/cli & @babel/core （使用babel命令行，即需要安装这两个devdependencies）

如果是一个 Monorepos，不管是否需要给每个小包单独设置 babelrc，至少应该在根目录设置一个 babel.config.js:image.png
该配置用于让根目录执行 babel 命令行时，packages中的babelrc也能被正确识别。
如果在 cd ./packages/xxx 中执行 babel 命令操作，若当前文件夹无 babelrc，可能会出现问题，这时候可以简单地添加一个命令行参数 root-mode upward：
image.png
相当于往该文件夹外寻找 babel 配置文件，这样就能读取到跟目录的配置文件了 。
image.png
该两个配置只可用于命令行，不可用于rc配置文件：
root: 当前寻找配置文件路径，默认是 process.cwd。差不多就是 ‘.’
rootMode：相当于指定当前寻找 babelrc 的方式，—root-mode upward 配置允许从 root 路径向外部寻找 babelrc配置文件。这在 mono包中可以让子包使用 根目录下的默认 rc文件。

配置了babelrcRoots 也就相当于即使命令行在 monorepo 的根目录执行，依旧能正确识别pacakge/xx 下的 babelrc 为 ‘root’ 类型。
更多mono包配置：https://babeljs.io/docs/en/config-files#monorepos

babel 编译 ts
默认情况下，babel 不编译 ts 文件，需要添加 extensions：
image.png