Shimming：本质、方法及工作原理

什么是 Shimming？

Shimming 是一种软件技术，它在代码与环境之间嵌入一层兼容层，而不修改模块的源代码。在 JavaScript 构建的上下文中，shimming 解决的是模块引用模块环境中不存在的全局变量（window.$、global.process）的问题。

Shim 和 polyfill：主要区别

Polyfill 从零开始实现缺失的功能，为环境添加新的能力。例如，core-js 为旧浏览器添加 Array.prototype.flatMap。而 shim 则将现有的调用重定向到可用的实现，或替换期望的全局对象。在 Webpack 中，ProvidePlugin 会在任何出现对全局变量 $ 的引用之处自动插入 import $ from 'jquery'，无需修改代码。

主要区别在于目标。Polyfill 添加所缺失的内容，而 shim 使现有代码与其运行环境兼容。两者之间的选择取决于要解决的问题：是缺少 API，还是接口不兼容。

Shimming 在 Webpack 中如何工作

Webpack 将每个模块视为具有自身作用域的隔离单元。如果库像 window.$ 那样引用全局变量 jQuery，构建将因模块上下文中不存在该变量而以错误结束。ProvidePlugin 在编译阶段解决这个问题：当在代码中检测到标识符 $ 时，插件会自动在文件开头插入 import $ from 'jquery'。

// 源代码（旧版模块引用全局 jQuery）
$('.element').hide();

// 经过 ProvidePlugin 处理后（Webpack 插入 import）
import $ from 'jquery';
$('.element').hide();

此外，imports-loader 允许显式指定模块应获得哪些依赖。当库在顶层使用 this 并期望 this 指向 window 而非 module.exports 时，这很有用。

ProvidePlugin：为模块提供全局变量

ProvidePlugin 是 Webpack 的内置插件，当检测到对指定标识符的引用时自动加载模块。配置是一个对象，其中键是变量名，值是模块路径和导出的字段。

插件配置

// webpack.config.js
const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      _: 'lodash',
      'window.$': 'jquery',
    }),
  ],
};

ProvidePlugin 支持通过数组语法进行定向导入。例如，[lodash, debounce] 只从 lodash 导入 debounce 函数，从而减小最终包的大小。这对于移动项目尤其重要，因为每个千字节都会影响加载时间。

imports-loader 和 exports-loader

imports-loader 在模块开头添加必要的导入，而 exports-loader 为不显式使用 module.exports 的模块设置导出的值。这些 loader 在单个文件的层面工作，而不是像 ProvidePlugin 那样全局工作。

使用 imports-loader 修复依赖

// webpack.config.js — imports-loader 配置
module.exports = {
  module: {
    rules: [
      {
        test: /legacy-module\.js$/,
        use: [
          {
            loader: 'imports-loader',
            options: {
              imports: [
                'jquery',
                '$',
              ],
            },
          },
        ],
      },
    ],
  },
};

当库将值赋给全局变量但不通过模块系统导出它时，使用 exports-loader。loader 提取该值并将其转换为模块导出，从而使其他模块能够通过 import 导入它。

在 Webpack 配置中设置 shimming

Shimming 在 webpack.config.js 中通过插件和 loader 的组合进行配置。典型方案包括用于全局变量的 ProvidePlugin 和用于需要更改作用域的特定模块的 imports-loader。

用于 shimming 的基本 Webpack 配置

const webpack = require('webpack');
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    globalObject: 'this',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules\/(?!legacy-lib)/,
        use: [
          {
            loader: 'imports-loader',
            options: {
              type: 'commonjs',
              imports: ['jquery', '$'],
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
    }),
  ],
};

output 中的 globalObject 字段设置顶层对 this 的引用的上下文。对于浏览器环境，值 'this' 指向 window，而对于 React Native 或 Node.js — 指向 global。选择正确的值可以防止目标环境中的运行时错误。

shimming 中的常见错误

Shimming 是一个强大但危险的工具。错误的配置会导致包中的代码重复、命名冲突和意外的运行时错误。开发者常常忘记 ProvidePlugin 在编译阶段工作，无法处理对变量的动态引用。

全局变量冲突

如果两个插件使用不同版本的 jQuery，ProvidePlugin 只会插入配置中首先指定的那一个。第二个库将获得不兼容的版本，从而引发难以调试的错误。解决方案是使用 exports-loader 并为每个库明确指定版本，或者应用 webpack.IgnorePlugin 排除重复的模块。

另一个常见错误是试图对在动态上下文中使用 CommonJS 同步 require 调用的模块进行 shimming。ProvidePlugin 只处理静态标识符，因此动态引用必须手动替换，或使用 NormalModuleReplacementPlugin。

错误 shimming 导致的性能问题

错误的 shimming 配置可能导致包的大小显著增加。如果 ProvidePlugin 配置了数十个全局变量，Webpack 会将相应的导入插入项目的所有文件，无论这些变量是否在每个特定文件中被使用。这会产生冗余代码，尤其是在包含数千个模块的大型项目中。

要诊断 shimming 问题，请使用 webpack-bundle-analyzer — 一种可视化包组成的工具。如果 jQuery 或其他库多次出现在包中，可能是不同版本发生冲突，或者 ProvidePlugin 配置了多个指向包不同版本的标识符。解决方案是通过 resolve.alias 统一依赖版本，并确保所有被 shim 的标识符都指向同一个模块。

shimming 的替代方案：重构和更新依赖

在应用 shimming 之前，评估将库更新到支持模块系统的版本的可能性。许多旧版包都有不需要 shimming 的现代替代品。例如，jQuery 插件可以用浏览器的原生 API 替换：$.ajax → fetch、$.each → Array.forEach。重构在维护方面带来长期收益，而 shimming 则是一种使配置复杂化的临时解决方案。

如果无法更新，请考虑 NormalModuleReplacementPlugin，它允许在不修改源代码的情况下在解析层面将一个模块替换为另一个。该插件在构建依赖关系图的阶段、在应用 loader 之前工作，并且无论上下文如何都处理对该模块的所有引用。与定向 loader 相比，这是替换整个库的更干净的解决方案。

现代 JavaScript 中的 Shimming：ESM 和 import maps

随着浏览器中原生 ES 模块的发展以及 import maps 的出现，某些 shimming 场景可以在没有 Webpack 的情况下解决。import maps 允许在浏览器层面即时重新分配模块名称，无需构建阶段。然而，这种方法在 React Native 和其他没有浏览器 ESM 的环境中不受支持，因此通过 Webpack 进行 shimming 对于需要完全控制依赖及其版本的 production 构建仍然适用。import maps 与 Webpack shim 之间的选择取决于目标平台以及与旧浏览器兼容性的要求。