從客戶端構建后無法訪問 webpack 中定義的變量

Question

這可能是一個新手問題，但是在研究了平台上的其他問題並深入研究了 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命令構建后，圖表加載沒有問題。 我面臨的問題是我會假設我可以在控制台中訪問此圖表的實例，因為我希望在圖表初始化后對數據進行一些更新。

如果 Chart.js 是 CDN 或直接加載，我希望能夠訪問變量myFirstChart 。

這是我在 Chart.js 或 Webpack 5 的文檔中可能忽略的東西嗎？

Answer 1

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 object 來明確發布（這是瀏覽器查找它們的地方，除非它們被定義在更本地的地方，因為您嘗試訪問它）。