时间戳

首页 > 解决方案 > 使用Webpack时没有定义d3

javascript - 使用Webpack时没有定义d3

问题描述

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

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

这是在 Chrome 中运行的。当我在控制台中输入“d3”或“window.d3”时，它会返回“Uncaught ReferenceError: d3 is not defined”。

包.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"
            }
         }
      ],
   },
};

标签： javascriptwebpackd3.js

解决方案

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

仅供参考，如果你真的需要导入全局的东西，你可以在你的入口 js 文件中做这样的事情：

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

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

推荐阅读