浅谈webpack5自动注入环境polyfill的策略

前言

webpack5 相较 wp4 取消了内置的 polyfill （如 process 等），谈到 polyfill ，这里我们先分个类：

category	package	description
babel polyfill	core-js / regenerator-runtime	高阶 es 语法，async 异步 polyfill
nodejs polyfill	node-libs-browser	buffer 、process 等 polyfill

我们的需求侧逻辑：

1. 在 babel polyfill 范围内，我们全量需要。当然本篇文章不会讲述 babel polyfill 的配置方法、配置策略，以及 polyfill 来源，通常情况下，使用原子的 core-js 和 regenerator-runtime 作为底层垫片是一种比较好的做法。

2. 在 nodejs polyfill 范围内，我们最常用的是 process ，他可以提供 process.env.* 系的支持，本文也只会针对 process 进行一个解法的介绍。

解法

在了解了前置知识后，我们看一下如何 polyfill 。

babel polyfill

安装依赖：

  pnpm add core-js regenerator-runtime

配置 webpack alias 定位：

// webpack.config.ts
import { dirname } from 'path'

const asyncPolyfill = dirname(require.resolve('regenerator-runtime/package'))
const corejsPolyfill = dirname(require.resolve('core-js/package'))

alias:{
  'regenerator-runtime': asyncPolyfill,
  'core-js': corejsPolyfill,
}

此处的解法逻辑是重定向 core-js 和 regenerator-runtime 到他们的包根目录，因为根据 babel polyfill 策略的不同，babel 会自助帮你进行如下位置的垫片导入：

• core-js/stable/*

• core-js/modules/*

• regenerator-runtime/runtime.js

由于是一个具体位置，所以不可以直接 require('core-js') 拿到 main 入口，因为 main 入口不是所需的。

process

解 process 的逻辑是利用 webpack 的全局自动导入插件 ProvidePlugin 。

先安装依赖：

  pnpm add process

进行配置：

// webpack.config.ts
import { ProvidePlugin } from 'webpack'

plugins: {
  new ProvidePlugin({
    process: require.resolve('process/browser'),
  })
}

其原理是当识别到 process 使用时，webpack 就会帮你注入对应的脚本，使用全局 jQuery 时也常用此法，你可以在文档内了解更多信息：

• 官方文档：webpack.ProvidePlugin

注：以上所有代码演示均采用 typescript 方式，如果你需要在 js 内使用，请使用 cjs 格式语法。

总结

通常情况下我们手动 polyfill 这三个库还是比较繁琐的，将其内置到 cli 内是一个比较好的进阶解法。

另外 wp5 在基础配置上的心智压力要比 wp4 大太多了，持续拥抱变化才是王道。

其他

• webpack4 默认使用的 polyfill 合集说明：resolve.fallback

• node polyfill 大全一览：node-libs-browser