从RequireJS迁移至Webpack 4.6：Shimming配置迁移问题

Hey there! 我太懂这种从熟悉的RequireJS转到Webpack时的迷茫了——尤其是shim这块，两者的模块处理逻辑完全不是一个路子。别担心，我来一步步帮你把RequireJS里的shim配置对应到Webpack里。

首先，先明确下：RequireJS的shim主要是用来处理非AMD规范的老旧模块——要么帮它们指定依赖，要么把全局变量导出成模块可用的形式。在Webpack里，我们需要用几个不同的工具来实现同样的效果，下面结合常见的shim场景来拆解：

先看个典型的RequireJS Shim示例 #

假设你的旧配置是这样的（补全了你没写完的部分）：

require.config({
baseUrl: typeof(templateBaseUrl) !== 'undefined' ? templateBaseUrl : '../js',
waitSeconds: 20,
shim: {
// 依赖jQuery的Bootstrap插件
'bootstrap': {
deps: ['jquery'],
exports: '$.fn.bootstrap'
},
// 无依赖但暴露全局变量LegacyLib的旧库
'legacy-lib': {
exports: 'LegacyLib'
}
}
})

对应Webpack 4.6的配置方案 #

1. 处理全局依赖（对应shim里的deps） #

如果你的模块依赖全局变量（比如jQuery），不用每个文件都手动import，可以用Webpack的ProvidePlugin自动注入：
首先确保你已经安装了jquery：npm install jquery --save
然后在webpack.config.js里配置：

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

module.exports = {
  // 基础配置
  mode: 'development', // 或者'production'，Webpack4必须指定
  entry: './src/main.js', // 你的入口文件，对应RequireJS的主入口
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  // 全局依赖注入
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery' // 确保某些老库能找到全局的jQuery
    })
  ]
};

2. 导出全局变量为模块（对应shim里的exports） #

对于像legacy-lib这种暴露全局变量但不支持模块化的库，我们用exports-loader把全局变量转成模块导出：
先安装loader：npm install exports-loader --save-dev
然后添加到module.rules里：

module.exports = {
  // ...其他配置
  module: {
    rules: [
      {
        // 匹配你的旧库文件路径，用require.resolve确保找到准确位置
        test: require.resolve(path.join(__dirname, '../js/legacy-lib.js')),
        // 把全局变量LegacyLib导出为模块的默认导出
        use: 'exports-loader?LegacyLib'
      }
    ]
  }
};

之后你就可以在代码里用import LegacyLib from 'legacy-lib'来引用它了。

3. 处理既依赖又需导出的模块（比如Bootstrap） #

如果是像Bootstrap这种依赖jQuery的插件，在配置了ProvidePlugin之后，大部分情况直接import 'bootstrap'就能用，但如果是特别老的版本，可能需要用imports-loader强制注入依赖：
先安装loader：npm install imports-loader --save-dev
然后配置：

module.exports = {
  // ...其他配置
  module: {
    rules: [
      {
        test: require.resolve('bootstrap'),
        // 告诉Webpack这个模块依赖全局的jQuery
        use: 'imports-loader?jQuery=jquery'
      }
    ]
  }
};

4. 对应RequireJS的baseUrl和paths #

RequireJS的baseUrl和paths在Webpack里用resolve配置来实现：

module.exports = {
  // ...其他配置
  resolve: {
    // 对应baseUrl：优先从../js目录查找模块
    modules: [path.resolve(__dirname, '../js'), 'node_modules'],
    // 对应paths：给模块起别名，比如把'utils'指向../js/utils目录
    alias: {
      'utils': path.resolve(__dirname, '../js/utils')
    }
  }
};

额外注意点 #

• Webpack 4的waitSeconds没有直接对应项，因为Webpack是静态构建，不会在运行时等待加载，只要构建时能找到所有模块就没问题。
• 如果遇到模块加载顺序问题，可以把依赖项放到entry数组的前面，比如entry: ['jquery', './src/main.js']，确保jQuery先加载。

如果你的实际shim配置有更复杂的场景，比如多个依赖或者特殊的导出格式，随时告诉我具体内容，我再帮你调整配置~

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