Webpack如何将模块填充在窗口关闭中？答案

【问题标题】：Webpack how to shim module wrapped in window closure?Webpack如何将模块填充在窗口关闭中？
【发布时间】：2019-06-12 04:21:46
【问题描述】：

我有一些仅用于浏览器的第三方代码。它被包装在一个自调用函数中，该函数期望传递window。

(function (window) { "use strict";
   window['module'] = {}
})(window);

有没有更好的名字来描述这个样式模块？

我想用webpack来require或import这个代码。

当前使用 webpack@3.5.1 我需要它才能在 Node.js 和 ES6 环境中工作。

【问题讨论】：

这只是你问题的开始。但是，有很多像这样的选择：npmjs.com/package/window

标签： javascript webpack shim

【解决方案1】：

我可以通过使用imports-loader 和exports-loader 来实现这一点

rules: [
  {
    test: /MyModule\.js/,
    use: [
      "imports-loader?window=>{}",
      "exports-loader?window.MyModule"
    ]
  },

【讨论】：

【解决方案2】：

除非作者将其代码更新为UMD（或类似的），否则您将无法使用require/import。

如果没有作者的修改，我想不出一种方法可以让它真正工作。

不过，在the window package 的帮助下，您可以使用以下技巧：

//in a separate file
const Window = require("window");
const window = new Window();
global.window = window; //Try with and without this
require("my_module");
module.exports = window["module_global_variable_name"];

但这只有在作者不使用任何其他全局变量的情况下才有效（例如，fetch 而不是window.fetch 会破坏这个技巧）。

【讨论】：

还好，window.属性貌似没用
我认为这个解决方案可行。不幸的是，require("my_module") 没有返回任何东西，因为没有导出。我相信有一个 webpack 配置步骤可以直接包含它，但它缺少
哦，我的错，我完全忘记了这个，我会马上编辑这个

【解决方案3】：

尝试从窗口中要求/导入的另一种方法是在您的导入声明之后对其进行解构。这会给您一种重要的感觉，而无需跳槽。

// Normal Imports
import Foo from "Foo";

// Globals from window
const {
  Bar
} = window;

【讨论】：