在页脚中加载的 js 文件中无法访问 Webpack 主 javascript 文件的功能

Question

我有一个我写的函数，它包含在所有页面上，它将为所有 POST 标头提供 CSRF 令牌。因为我希望它出现在所有页面上，所以我将它包含在由 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 中的函数无法访问其他文件。如何使 webpacked 主 js 文件中的函数可以访问其他文件？

Answer 1

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

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

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

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

window.setupAjaxCsrfToken = setupAjaxCsrfToken;