Babel 配置 - 最佳实践

Babel 是 JavaScript 的编译器，通过 Babel 可以将我们写的最新 ES 语法的代码轻松转换成任意版本的 JavaScript 语法。随着浏览器逐步支持 ES 标准，我们不需要改变代码，只需要修改 Babel 配置即可以适配新的浏览器。

Presets 和 Plugins

Babel 的语法转换是通过强大的插件 (plugin) 系统来支持的。

Babel 的插件分为两类：

• 转换插件：比如将箭头函数转换为 ES5 函数写法，那么可以使用 @babel/plugin-transform-arrow-functions 插件。
• 语法解析插件：解析插件就是扩展语法的。比如 React 的 JSX 语法，这就需要 @babel/plugin-syntax-jsx （解析 JSX) 和 @babel/plugin-transform-react-jsx （将 JSX 变成 React 函数调用）。

一个一个添加插件肯定十分麻烦，所以解决这个有了插件组合 preset （插件预设）。

preset = [plugin, plugin, plugin, ...]

比如 @babel/preset-env 是 Babel 官方推出的插件预设。

Babel polyfill

Babel 只负责进行语法转换，即将 ES6 语法转换成 ES5 语法。

但在 ES5 中有些对象、方法实际在浏览器中可能是不支持的，例如：Promise、Array.prototype.includes，这时候就需要用@babel/polyfill 来做模拟处理。

代码中引入了 polyfill，不再是开发依赖 (--dev -D)。npm (--save-dev -D)

yarn add @babel/polyfill

将 @babel/polyfill 引入：

// 方法一：webpack.config.js
module.exports = {
  //...
  entry: {app: ['@babel/polyfill', './path/to/my/entry/file.js']}
}

// 方法二：编译入口文件
import '@babel/polyfill'

@babel/polyfill 是 core-js 和 regenerator-runtime（自定义） 的合集。

从 Babel 7.4.0 开始，不推荐直接使用 @babel/polyfill（弃用）。而是直接引入对应的 core-js 或者 regenerator-runtime 模块，但是手动引入的方式还是太费劲。

import 'core-js/stable'
import 'regenerator-runtime/runtime'