迁移项目至Webpack后techan.js无法识别d3全局变量的解决方法（无需修改源码）

不用修改techan.js和d3.v4.js源码的前提下，有几种可靠的解决方案，根据你的场景选择即可：

方法一：手动将d3挂载到全局（最简单，无需额外Webpack配置） #

因为techan.js期望全局存在d3变量，你可以先加载d3并手动挂载到window对象，再加载techan。注意如果用ES模块的import，由于静态解析特性，直接顺序导入会失效，推荐用CommonJS的require来确保执行顺序：

// main.js
// 先加载d3并挂载到全局
const d3 = require('./d3.v4.min');
window.d3 = d3;

// 再加载techan，此时它就能找到全局的d3了
const techan = require('./techan');

// 你的业务逻辑代码...

如果坚持用ES模块，可以用动态import控制加载顺序：

// main.js
import d3 from './d3.v4.min';
window.d3 = d3;

// 动态导入techan，确保d3已经挂载到全局
import('./techan').then(({ default: techan }) => {
  // 在这里使用techan编写业务代码
});

方法二：用Webpack的ProvidePlugin自动注入d3 #

通过Webpack的ProvidePlugin，可以让Webpack自动为依赖d3的模块（比如techan）注入d3变量，无需手动挂载全局：

在你的webpack.config.js中添加如下配置：

const webpack = require('webpack');

module.exports = {
  // 其他Webpack配置（entry、output等）...
  plugins: [
    new webpack.ProvidePlugin({
      d3: './d3.v4.min' // 指定当模块中用到d3变量时，自动导入对应的d3模块
    })
  ]
};

配置完成后，你可以正常用ES模块导入techan，Webpack会自动处理d3的依赖：

// main.js
import d3 from './d3.v4.min';
import techan from './techan';

// 业务逻辑代码...

方法三：用expose-loader将d3暴露为全局变量 #

expose-loader可以直接将模块暴露到全局window对象上，适合需要全局访问模块的场景：

1. 先安装依赖：

npm install expose-loader --save-dev

2. 然后修改main.js的d3导入方式：

// main.js
// 导入d3并同时暴露为全局window.d3
import 'expose-loader?d3!./d3.v4.min';
import techan from './techan';

// 业务逻辑代码...

或者你也可以在Webpack配置中统一配置，避免在代码中写loader前缀：

// webpack.config.js
module.exports = {
  // 其他配置...
  module: {
    rules: [
      {
        test: require.resolve('./d3.v4.min'), // 匹配你的d3文件路径
        use: [{
          loader: 'expose-loader',
          options: 'd3'
        }]
      }
    ]
  }
};

这样之后，正常导入d3就会自动挂载到全局，techan就能识别到了。

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