d3在使用Webpack时没有定义

Question

经过几个小时的挖掘，我认为这篇文章不是重复的。

我在一个项目中包括d3使用Webpack。我正在遵循"从'd3' '导入*作为d3' '"的推荐技术，但由于某种原因，我得到了"未捕获的ReferenceError: d3未定义"。当我查看输出的bundle文件时，我看到它导入了所有d3模块，但是由于某种原因，主要的d3.js文件不在那里。知道是怎么回事吗?

这是在Chrome中运行。当我输入"d3"或";window.d3"到控制台，它返回"Uncaught ReferenceError: d3 is not defined"

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加载的其他模块。我有逻辑在我的窗口检查。D3在尝试绘制图形之前就存在了，因为D3没有被全局暴露，所以检查失败了。此外，当我使用控制台进行故障排除时，由于同样的原因，我无法看到d3。我在代码中更改了逻辑来检查d3而不是窗口。D3和它开始工作。

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

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

编辑:更好的是，你可以使用expose-loader。