Question

所以，我有一个创建全局对象的脚本

(function() {

   window.GlobalThing = {}

})();

此脚本还将填充此对象属性

   if (!GlobalThing .Resource) { GlobalThing .Resource = require('./Resource'); }

然后，一些未与webpack捆绑在一起的其他脚本需要使用此GlobalThing。我试图使用ProvidePlugin使其全局化，例如：

plugins: [
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "window.jQuery": "jquery",
        'GlobalThing': path.join(__dirname,"Path/GlobalThing.js")
    })
],

我也试过添加Alias

resolve: {
    alias: {
       'GlobalThing': path.join(__dirname,"Path/GlobalThing.js")
    }
}

我也试过在GlobalThing.js文件的最后做这样的事情：

(function(){
   window.GlobalThing = GlobalThing;
})();

然后我必须导入才能运行脚本，所以我在webpack中有一个随机的js文件来测试它：

import GlobalThing from "GlobalThing ";

但是，似乎有些脚本不能see GlobalThing。如果我用webpack捆绑所有东西，它可以工作，但我不想，因为我们的应用程序很老，有一些非常旧的东西。有没有办法可以将GlobalThing暴露给那些较旧的脚本？

Answer 1

ProvidePlugin获取模块名称（即字符串），并在内部使用require加载它。所以这不会帮助你加载自己的脚本。

那说，以下应该有效：

将GlobalThing脚本保留在webpack bundling之外
确保将脚本本身复制到输出文件夹
确保index.html（或您正在使用的任何html页面）的脚本按照GlobalThingScript.js 后面的顺序由webpack bundle.js

为您提供更多见解：当webpack捆绑除GlobalThingScript.js以外的脚本时，它甚至不知道有一些名为GlobalThing的东西。它只捆绑其他文件。

这意味着要确保GlobalThingScript.js也被发送到最终的output文件夹。此外，html来源应使用<script>标记在 webpack GlobalThingScript.js之前加入bundle.js 。

如果问题仍然存在，请编辑OP以包含html源。

希望有所帮助。

在Webpack外部导入JS文件

1 个答案: