迁移遗留项目至Webpack：全局变量依赖打包方案咨询

我刚好处理过类似的遗留项目迁移需求，这个方案完全不用修改原有代码，还能满足你所有的要求：

核心思路 #

给所有遗留JS文件搭一个隔离的共享"虚拟全局环境"：

• 用一个自定义对象模拟浏览器的window，所有遗留文件的全局变量都存在这里
• 让每个遗留文件都在这个虚拟环境里执行，自动共享变量
• 完全和真实的全局window隔离开，不会污染全局作用域
• 完全兼容Webpack的缓存机制，不会影响构建效率

具体操作步骤 #

1. 先建一个全局容器文件 #

在项目根目录新建legacy-global.js，作为遗留文件的共享全局容器：

// 这就是遗留文件专用的"虚拟window"
const legacyGlobal = {};

// 如果遗留代码用到了浏览器原生全局对象（比如document、console），可以在这里代理过去
Object.assign(legacyGlobal, {
  document: window.document,
  console: window.console,
  // 其他需要的原生对象按需加就行
});

module.exports = legacyGlobal;

2. 配置Webpack的loader规则 #

在webpack.config.js里添加针对遗留文件的规则，用两个内置loader自动处理全局变量：

module.exports = {
  // ...你的其他Webpack基础配置
  module: {
    rules: [
      // 匹配所有遗留文件（这里假设都在src/legacy文件夹下，你可以根据实际路径调整）
      {
        test: /src\/legacy\/.*\.js$/,
        use: [
          // 把当前文件里的全局变量自动挂载到虚拟全局容器
          {
            loader: 'exports-loader',
            options: {
              type: 'commonjs',
              exports: () => `Object.assign(require('./legacy-global'), module.exports)`,
            },
          },
          // 把虚拟全局容器注入为文件内的window/global/this
          {
            loader: 'imports-loader',
            options: {
              wrapper: 'this',
              additionalCode: `
                const window = require('./legacy-global');
                const global = window;
              `,
            },
          },
        ],
        // 确保这个规则优先处理遗留文件
        enforce: 'post',
      },
    ],
  },
  // 显式开启Webpack缓存（Webpack5+默认开启，这里写出来更稳妥）
  cache: {
    type: 'filesystem',
    buildDependencies: {
      config: [__filename],
    },
  },
};

3. 统一引入遗留文件 #

在项目的主入口（比如src/index.js）里按原有顺序引入所有遗留文件就行：

// 先加载全局容器
import './legacy-global';

// 按原来的加载顺序引入遗留文件
import './legacy/legacy1.js';
import './legacy/legacy2.js';
// ...其他遗留文件

如果遗留文件太多，不想一个个写，可以用require.context自动批量加载：

// 自动加载src/legacy下的所有JS文件，按文件名排序保持原有顺序
const legacyFiles = require.context('./legacy', false, /\.js$/);
legacyFiles.keys().sort().forEach(legacyFiles);

为什么这个方案符合你的要求？ #

• 不用逐个找全局变量：所有遗留文件的全局变量都会自动同步到虚拟全局容器里，互相直接访问，完全不用手动梳理依赖
• 变量不泄漏：真实的浏览器全局window完全没被碰，所有遗留的全局变量只存在于我们的虚拟容器中
• 支持Webpack缓存：loader是基于文件路径处理的，Webpack能正常缓存每个遗留文件的处理结果，不会因为全局容器的存在导致缓存失效
• 零修改遗留代码：所有处理都是Webpack层面完成的，原有遗留代码一行都不用改

内容的提问来源于stack exchange，提问作者VitalyB