在页脚

Question

我有一个函数，我写的是要包含在所有会为所有POST标题提供CSRF令牌的页面上。因为我想在所有页面上使用它，所以我将它包含在我的common.js文件中，该文件由webpack创建并加载到页面的头部。

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中的函数不能被其他文件访问。如何在web包的主js文件中创建其他filse可以访问的函数？

Answer 1

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

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

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

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

window.setupAjaxCsrfToken = setupAjaxCsrfToken;