重构旧JavaScript：迁移至Webpack还是保留原生JS？

迁移Webpack还是维持现状？ #

如果你的项目后续有功能迭代、依赖管理优化、代码体积压缩这类需求，迁移Webpack肯定更划算：它能解决全局变量冲突问题，还能通过代码分割、Tree Shaking优化加载性能，也方便后续引入新的模块化代码。如果只是单纯维护旧功能，几乎不需要新增代码，那维持现状也可以，但长期来看，Webpack能降低后续维护的复杂度。

Webpack适配无模块机制旧JS的可行方案 #

针对50-100个这类IIFE结构的旧文件，不用逐个手动加import/export，这些方案可以快速适配：

1. 用script-loader直接执行全局代码 #

这个loader会把JS文件当成全局脚本执行，原文件里的IIFE会正常把变量挂载到window上，完全不用修改旧代码。
配置示例：

const path = require('path');

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'script-loader',
        include: path.resolve(__dirname, './js') // 旧JS文件所在目录
      }
    ]
  }
}

2. 用exports-loader把全局变量转为模块导出 #

如果想让旧文件能被其他模块化代码引用，又不想改原文件，可以用这个loader把全局变量导出成模块。比如针对common.js，配置后其他模块可以直接import使用。
批量配置示例：

const path = require('path');

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        include: path.resolve(__dirname, './js'),
        use: [
          {
            loader: 'exports-loader',
            options: {
              exports: (filePath) => {
                // 从文件名提取要导出的变量名，比如common.js对应common
                const varName = path.basename(filePath, '.js');
                return `window.${varName}`;
              }
            }
          }
        ]
      }
    ]
  }
}

3. 用ProvidePlugin自动注入高频全局变量 #

如果某些全局变量（比如common、jqextend）在很多地方被使用，可以用Webpack内置的ProvidePlugin自动注入，模块里不用写import就能直接用。
配置示例：

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

// 批量生成要注入的变量映射
const jsDir = path.resolve(__dirname, './js');
const provides = {};
fs.readdirSync(jsDir).forEach(file => {
  if (file.endsWith('.js')) {
    const varName = path.basename(file, '.js');
    provides[varName] = path.resolve(jsDir, file);
  }
});

module.exports = {
  plugins: [
    new webpack.ProvidePlugin(provides)
  ]
}

4. 写脚本批量给旧文件加导出语句 #

如果想彻底把旧文件转为模块化，又不想手动改，可以写个简单的Node.js脚本，遍历所有旧JS文件，在末尾追加导出语句。比如：

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

const jsDir = path.resolve(__dirname, './js');

function addExport(filePath) {
  const content = fs.readFileSync(filePath, 'utf8');
  const varName = path.basename(filePath, '.js');
  // 检查是否已经有导出语句，避免重复添加
  if (!content.includes(`export default ${varName}`)) {
    const newContent = content + `\nexport default ${varName};`;
    fs.writeFileSync(filePath, newContent);
  }
}

// 遍历目录处理所有JS文件
fs.readdirSync(jsDir).forEach(file => {
  if (file.endsWith('.js')) {
    addExport(path.resolve(jsDir, file));
  }
});

运行这个脚本就能一次性给所有旧文件加上导出，之后就可以正常用Webpack打包了。

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