javascript - Webpack 主要 javascript 文件的函数在页脚加载的 js 文件中无法访问

Question

我编写了一个包含在所有页面上的函数，该函数将为所有 POST header 提供 CSRF token 。由于我希望它出现在所有页面上，因此我将其包含在由 webpack 创建并加载到页面头部的 common.js 文件中。

function setupAjaxCsrfToken(){
    var csrf_token = $('meta[name="csrf-token"]').attr('content');
    $.ajaxPrefilter(function(options, originalOptions, jqXHR){
        if (options['type'].toLowerCase() === "post") {
            jqXHR.setRequestHeader('X-CSRFToken', csrf_token);
        }
    });
}

我最初希望这是一个 IIFE，但由于我的帖子位于其他文件中，我决定在帖子所在的 js 文件的顶部调用它(也许它应该有效，并且与我的问题相同)我即将描述)。我调用此函数的文件被加载到页面的页脚中，以便其他 js 文件可以首先加载。但是当调用该函数时，我收到一个函数未定义错误。我也尝试过使用命名函数表达式，得到相同的结果(函数未定义)。我最初的想法是，这可能是一个竞争条件，并且该函数直到调用后才被定义，但我尝试使用 let 声明，但没有看到错误输出发生变化所以我认为它不会被吊起。对于函数提升的工作原理有点模糊，所以也许我已经离开那里了。我的下一个想法是 webpack 正在关闭范围，使 common.js 中的函数无法被其他文件访问。如何使 webpack 的主 js 文件中的函数可供其他文件访问？

Answer 1

Webpack确实隔离了各个模块的执行环境。提供给 Webpack 的所有模块都将放置在函数表达式中，以允许 Webpack 将每个模块的代码与其他模块隔离，并正确处理每个模块所需的导出/导入。

要解决您的问题，您可以在window上设置属性公开一个全局变量。但是，由于window，这仅在浏览器环境中工作。是浏览器特定的全局变量(Node 和其他执行环境可能不支持它)。

以下代码，如果放在函数声明之后，将允许您引用 setupAjaxCsrfToken函数通过引用window. setupAjaxCsrfToken .

运行时竞争条件不应该成为问题，因为浏览器通常按顺序执行 JavaScript 代码。

window.setupAjaxCsrfToken = setupAjaxCsrfToken;