Webpack新手求助：重构旧jQuery应用时处理全局依赖BIMsurfer@V1

嘿，作为刚折腾过类似老项目重构的开发者，太懂你这种卡在非模块化库上的痛苦了！针对你提到的全局jQuery和BIMsurfer V1的问题，我整理了几个靠谱的Webpack配置方案，一步步来：

1. 先搞定全局jQuery的依赖适配 #

因为BIMsurfer依赖全局作用域的jQuery，首先得让Webpack既能给你的ES6模块提供jQuery，又能让BIMsurfer找到它。

方案A：用ProvidePlugin自动注入jQuery #

这个插件能让Webpack在每个模块里自动注入jQuery，不用你手动写import $ from 'jquery'，同时还能把jQuery挂载到全局（配合后续配置的话）。

在你的webpack.config.js里添加配置：

const webpack = require('webpack');

module.exports = {
  // ...其他基础配置
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery' // 确保全局window对象上能找到jQuery
    })
  ]
};

方案B：用expose-loader强制挂载全局jQuery #

如果上面的配置还不够（比如BIMsurfer硬要找window下的$），可以用expose-loader把jQuery直接暴露到全局作用域：

首先安装loader：

npm install expose-loader --save-dev

然后在webpack.config.js里添加module规则：

module.exports = {
  // ...其他基础配置
  module: {
    rules: [
      {
        test: require.resolve('jquery'),
        loader: 'expose-loader',
        options: {
          exposes: ['$', 'jQuery']
        }
      }
    ]
  }
};

2. 处理非模块化的BIMsurfer V1 #

这个库是Grunt打包的非模块化文件，没有ES6 export，只能在全局作用域运行，我们有两种方式让它在Webpack项目里正常工作：

方式A：用script-loader直接引入 #

script-loader会把指定的脚本在全局作用域执行，这样BIMsurfer的全局变量（比如BIMsurfer）就会挂载到window上。

首先安装loader：

npm install script-loader --save-dev

然后在需要用到BIMsurfer的ES6模块里，这样引入：

// 先确保jQuery已经在全局（上面的配置搞定后）
import 'script-loader!../path/to/BIMsurfer.min.js';

// 现在就能直接访问全局的BIMsurfer了
const surfer = new BIMsurfer({ /* 你的配置项 */ });

方式B：封装一个shim模块导出BIMsurfer #

如果不想每个模块都用script-loader，可以创建一个专门的shim文件，比如src/utils/bimsurfer-shim.js：

// 引入jQuery（确保全局可用）
import 'jquery';
// 引入BIMsurfer，让它在全局作用域执行
import '../path/to/BIMsurfer.min.js';

// 导出全局的BIMsurfer，这样其他模块可以像正常ES模块一样import
export default window.BIMsurfer;

然后在你的业务模块里直接import：

import BIMsurfer from './utils/bimsurfer-shim';

const surfer = new BIMsurfer({ /* 你的配置项 */ });

3. 注意事项 #

• 确保你已经安装了对应版本的jQuery：npm install jquery@2.2 --save
• 如果BIMsurfer的文件放在项目静态资源目录里，要注意Webpack的路径解析，必要时可以配置resolve.alias来简化路径
• 测试时可以打开浏览器控制台，检查window.jQuery和window.BIMsurfer是否存在，确认全局变量挂载成功

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