使用 Webpack 时未定义 d3

Question

经过几个小时的挖掘，我不认为这个特定的问题是重复的。

我在使用 Webpack 的项目中包含 d3。我正在遵循“从 'd3' 导入 * 作为 d3”的推荐技术，但由于某种原因，我收到“未捕获的引用错误：d3 未定义”。当我查看输出的捆绑文件时，我看到它导入了所有 d3 模块，但是由于某种原因，主 d3.js 文件不在其中。有什么线索吗？

这是运行 Chrome。当我在控制台中键入“d3”或“window.d3”时，它 returns“未捕获的引用错误：d3 未定义”。

package.json

   "dependencies": {
      "d3": "^7.1.1",
      "fisforformat": "^2.0.0",
      "jquery": "^3.6.0"
   },

导入调用

import * as d3 from 'd3';

webpack.config.js (v5.59.1)

const path = require('path');

module.exports = {
   entry: './src/lib.js',
   output: {
      filename: 'lib.js',
      path: path.resolve(__dirname, 'dist'),
   },
   module: {
      rules: [
         {
            test: /\.m?js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
               loader: "swc-loader"
            }
         }
      ],
   },
};

Answer 1

我明白了。 Webpack 封装了导入的资源，只将它们暴露给通过 Webpack 加载的其他模块。我的逻辑是在尝试绘制图形之前检查 window.d3 是否存在，并且由于 d3 没有全局公开，因此检查失败。此外，当我使用控制台进行故障排除时，出于同样的原因我无法看到 d3。我更改了代码中的逻辑以仅检查 d3 而不是 window.d3 并且它开始工作了。

仅供参考，如果您确实需要将某些内容导入全局，您可以在入口 js 文件中执行类似的操作：

import * as d3 from 'd3';
window.d3 = d3;

编辑：更好的是，您可以使用 expose-loader。

使用 Webpack 时未定义 d3

d3 is not defined when using Webpack

javascript

d3.js

webpack