這可能是一個新手問題，但是在研究了平臺上的其他問題并深入研究了 Webpack 檔案之后，我看到了人們嘗試這樣做的許多方法。我沒有看到任何可以應用于我的問題的真正內容。
我希望使用打包器 (Webpack) 來使用 Chart.js。創建這個檔案我將實體存盤在一個變數中。請參閱以下代碼片段以進行操作。
src/index.js
import { Chart, registerables } from 'chart.js';
Chart.register(...registerables);
const myFirstChart = new Chart("test", {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
}]
}
})
webpack.config.js
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index.js',
}
}
index.ejs
<script src="../dist/index.js"></script>
使用webpack命令構建后圖表加載沒有問題。我面臨的問題是，我假設我可以在控制臺中訪問此圖表的實體，因為我希望在圖表初始化后對資料進行一些更新。
myFirstChart如果 Chart.js 是 CDN 或直接加載，我希望能夠訪問該變數。
這是我在 Chart.js 或 Webpack 5 的檔案中可能忽略的東西嗎？
uj5u.com熱心網友回復：
webpack 的全部意義在于處理模塊，模塊的全部意義在于不污染全域命名空間。如果另一個 JS 代碼檔案需要訪問一個變數，export它是在哪里創建的，import它在另一個檔案中。
模塊中定義的任何變數都是模塊范圍的；完全使用全域命名空間被廣泛認為是不好的做法。
如果您絕對需要（如果是這種情況，您很可能做錯了），請window.myFirstChart = myFirstChart;在您的index.js檔案中添加：
import { Chart, registerables } from 'chart.js';
Chart.register(...registerables);
const myFirstChart = new Chart("test", {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
}]
}
})
window.myFirstChart = myFirstChart;
您需要在全域范圍內可用的任何變數，您都需要通過將其附加到全域window物件（瀏覽器查找它們的地方，除非它們被定義為與您嘗試訪問它的位置相比更本地的任何地方）來明確發布。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/367428.html
標籤：javascript 网络包 图表.js