挖掘了幾個小時后，我認為這個特定問題不是重復的。
我在使用 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"
}
}
],
},
};
uj5u.com熱心網友回復：
我想到了。Webpack 封裝了匯入的資源，并且只將它們暴露給通過 Webpack 加載的其他模塊。我的邏輯是在嘗試繪制圖形之前檢查 window.d3 是否存在，并且由于 d3 沒有在全域范圍內公開，因此該檢查失敗。此外，當我使用控制臺進行故障排除時，出于同樣的原因，我無法看到 d3。我更改為代碼中的邏輯以檢查僅 d3 而不是 window.d3 并且它開始作業。
僅供參考，如果您確實需要將某些內容匯入全域，您可以在入口 js 檔案中執行以下操作：
import * as d3 from 'd3';
window.d3 = d3;
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/336806.html
標籤：javascript 网络包 d3.js