从客户端构建后无法访问 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的重点是处理模块，模块的重点是不污染全局名称space。如果另一个 JS 代码文件需要访问变量，export 它在创建它的地方，import 它在另一个文件中。

模块中定义的任何变量都只是模块作用域；人们普遍认为根本不使用全局名称space 是不好的做法。

如果您绝对需要它（如果是这种情况，您很可能做错了），请在您的 index.js 文件中添加 window.myFirstChart = myFirstChart;：

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 对象来发布（这是浏览器查找它们的地方，除非它们被定义在更本地的地方您正在尝试访问它）。

从客户端构建后无法访问 webpack 中定义的变量

Cannot access variables defined in webpack after build from client

javascript

webpack

chart.js