前端工程化探索——Babel补遗

---

title: 前端工程化探索——Babel补遗
category: Web
tag: [前端工程化,Babel]
date: 2019-07-14

---

工欲善其事必先利其器，先不引入webpack，使用cli使用babel

快速使用

安装

npm init -y
npm install --save-dev @babel/core @babel/cli @babel/preset-env # 开发依赖
npm install --save @babel/polyfill # 兼容库 babel目前更推荐使用下面的方式
npm install --save core-js regenerator-runtime

• @babel/core 核心库
• @babel/cli 命令行工具
• @babel/preset-env 预设环境，默认已经安装了一堆插件
• @babel/polyfill 是一个封装，和单独安装效果一致

配置

创建babel.config.js，设定了目标浏览器

• @babel/env 就是 @bable/preset-env 的缩写
• useBuiltIns，是否自动化导入用到的兼容库。
• corejs，polyfill使用的包

const presets = [
    [
        "@babel/env",
        {
            corejs: 3,
            useBuiltIns: "usage"
        }
    ]
]
const plugins = []
module.exports = { presets, plugins }

创建 .browserslistrc

#chrome > 75
ie >= 9

编译

./node_modules/.bin/babel src --out-dir lib
# 或者使用npx
npx babel src --out-dir lib

其他说明

preset-env 的问题

举个例子，我们想编译 箭头函数，如果不使用 preset，babel不会进行编译，我们引入对应插件：@babel/plugin-transform-arrow-functions来解决。

但这样太麻烦，插件千千万，一个一个安装太累，所以babel提供了 preset 预设环境，默认安装了足够多的插件，还不够的自己再单独安装。

在 babel.config.js 中添加 target 选项指明浏览器环境，更推荐使用 .browserslistrc 把配置外置，方便其他工具共享浏览器名单。

polyfill的问题

使用@bable/preset-env进行代码兼容，但会遇到一个问题，有些特性仍然有问题，这就需要polyfill来解决：

使用了pollyfill，这意味着你可以使用像 Promise 或 WeakMap 这样的新内置函数，像 Array.from 或 Object.assign 这样的静态方法，像Array.prototype.includes 这样的实例方法，以及 generator 函数（提供给你使用 regenerator 插件）。为了做到这一点，polyfill 增加了全局范围以及像 String 这样的原生原型。

也就是说polyfill是一个封装包。

在 babel7.4之后会提示@babel/polyfill已经被弃用。请使用下面俩包。

As of Babel 7.4.0, this package has been deprecated in favor of directly including core-js/stable (to polyfill ECMAScript features) and regenerator-runtime/runtime (needed to use transpiled generator functions):

import "core-js/stable";
import "regenerator-runtime/runtime";

补充，至于为啥一个包非得变成俩包，我去看了 core-js 的文档，作者说@babel/polyfill 没有提供平滑的方式让用户从core-js@2 升级成 core-js@3，所以他建议 不使用 polyfill 。似乎是封装包跟不上的原因。链接在此

按需使用corejs，我们使用的是 env preset，其中有一个 "useBuiltIns"选项，当设置为 "usage" 时，只包括你需要的 polyfill。编译的js只会require 你需要的包，而不是整个包。

结论：

1. 明白 polyfill存在的意义：对浏览器兼容代码是必须的
2. polyfill 目前被弃用的兼容办法：单独引入两个兼容包
3. 按需使用兼容包，设置 useBuiltIns: 'usage'

transform-runtime的问题

如果你在开发一些辅助工具，可以使用 transform runtime 插件而不是污染全局的 @babel/polyfill。目前还没用到。