函数未定义但可以在控制台中使用（Webpack）

Question

使用 webpack 时我遇到函数问题

这样定义的函数根本不可用：

function foo() {
    console.log("bar")
}

当我定义这样的函数时，它在控制台中运行：

window.foo = function() {
    console.log("bar")
}

但是从

这样的代码调用时它不起作用

window.test = function () {
    foo()
};

<button onclick="test()">

Answer 1

这是预期的行为。 Webpack 为每个模块创建一个单独的范围。在全局上下文中声明 variables/functions/etc 的正确方法是使用 window 对象。

请记住，您不需要全局上下文 (window) 即可在模块之间共享函数。您可以使用 export 语句公开模块中的函数，并在项目中的其他模块上使用它们。

Functions not defined but can be used in console (Webpack)