「JavaScript学习笔记」 Babel 主要配置项

基本构成

babel-core:

• 只包括 parse 和 output 部分
• 不做任何转换
• 可以通过bundler工具使用它(webpack rollup)

babel-polyfill babel-runtime

• 提供不能转换的部分(API，比如promise，Object.assign)，用以模拟转换es2015+到es5
• 依赖 regenerator(generators polyfill), core-js (剩余polyfill部分)
• 两者不同点在于，babel-polyfill的引入污染全局变量(相当于全局引入)，babel-runtime 对源码进行转换(提供转换函数包装源码)，不污染全局环境
• babel-runtime不是所有API都能够处理

babel plugins

• 代码转换，即具体的（语法）代码转换由plugin实现
• babel syntax / transform plugin
• stage-x 不推荐使用了

babel-preset-env

• 根据具体环境(target选项 node/ browserslist / electron)提供针对性的插件合集
• buildIns 选项，提供babel-polyfill的引入

core-js

• 它是JavaScript标准库的polyfill
• 它通过尽可能的模块化，让你能选择你需要的功能
• 它可以不污染全局空间
• 它和babel高度集成，可以对core-js的引入进行最大程度的优化
• 最新版本core-js@3 ，[email protected] 以上请使用 core-js@3+，新的语法提案会在 core-js@3+实现

来配置一下

// babel.config.js
module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        useBuiltIns: 'usage', 
        // 该配置项决定 preset 如何处理polyfill
        // "usage" | "entry" | false, defaults to false.
        // usage: 根据源码和target 自动引入polyfill，此时不需要在app入口引入 polyfill
        // entry：该选项会将 import "core-js/stable" 或import "regenerator-runtime/runtime" （或者cjs格式的引入） 替换为 所有的polyfill
        // 即一行代码表示占位，通过替换引入所有polyfill，省位置
        
        corejs: 3 
        // 2, 3 or { version: 2 | 3, proposals: boolean }, defaults to 2.
        // corejs 仅在 useBuildIns: usage/entry 时生效，
        // 该选项只决定使用的是什么版本的corejs
        // babel 7.4.0 以上需要安装使用 core-js@3 版本，同时注意entry时入口的使用方式
      }
    ]
  ],
  
  plugins: [
    [
      '@babel/plugin-transform-runtime', // 该插件依赖 @babel/runtime 需要安装
      {
        helpers: true, 
        // default: true 
        // 是否使用helper转换源码 preset-env: useBuiltIns: usage 下使用
        
        regenerator: true, 
        // default: true
        // 转换 regenerator-runtime
        // 非 useBuiltIns: usage 时使用 ，usage下已通过polyfill引入
        
        corejs: false,
        // false, 2, 3 or { version: 2 | 3, proposals: boolean }, defaults to false.
        // 转换core-js 以及对应版本
        // 通常项目应用不需要开启，全局已经通过preset-env引入了
        // 如果是开发供他人用的库，根据需要开启，避免不同polyfill实现不同导致功能失效
        
        
        absoluteRuntime: require('path/to/@babel/runtime/package.json'),  // 指定runtime版本
        version: require('@babel/helpers/package.json').version // 同样指定版本，以免出现依赖版本错误
      }
    ]
  ]
}
 
// src.js
// entry 时使用，usage时不要加上，由插件自动加入，false时手动选择自己需要的插件
// 另外 babel/polyfill 实际包含以下两个库，只是从babel 7.4 (使用core-js@3) 以后需要分开引入
import "core-js";
import "regenerator-runtime/runtime";

// babel 7.4 以下版本使用，注意 @babel/polyfill 为 core-js@2版本
import '@babel/polyfill';

小小总结一下

配置babel时，preset-env作为plugin引入的基础，提供 target / broswerlist 指定不同环境下的babel转换。
需要注意preset-env和babel-runtime 存在对源码转换重复的地方。

一般来说，app配置 useBuildIns: usage 时，动态引入polyfill和plugin，babel-runtime配置为不转换core-js和regenerator，由于app为一个整体，可以全局引入polyfill，如果有特别的第三方库需要单独配置。此外，现在大部分脚手架工具(vue-cli cra)默认不转换node_modules的第三方库。

如果项目不在乎polyfill大小，也可以 useBuildIns: entry 入口引入core-js 和 regenerator-runtime/runtime ，此时不需要引入runtime helper。

如果开发的是一个需要带polyfill且避免污染全局环境的第三方库，那么则配置为 useBuildIns: false babel-runtime 配置 core-js-: 3 helper: true regenerator: true 由runtime配置polyfill。

可能会遗忘的内容

plugins 和 presets 的顺序

presets 从后往前加载(配置项的数组从后往前)，历史原因：原来的用户大多数会["es2015", "stage-0"]的形式书写，新的提案往往写在后面，新提案可能会依赖了ES6的语法，因此需要先解析到ES6再转ES5。

plugins 按照数组顺序从第一个到最后一个编译。

参考文章

结合Babel 7.4.0 谈一下Babel-runtime 和 Babel-polyfill
Babel学习系列3-babel-preset,babel-plugin
Babel学习系列4-polyfill和runtime差别(必看)
babel-polyfill vs babel-plugins -- stackoverflow