Webpack 如何将 shim 模块包裹在 window 闭包中？

Question

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

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

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

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

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

Answer 1

除非作者将其代码更新为 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 会毁掉这个技巧）。

Answer 2

尝试从 window require/import 的另一种方法是在导入声明后对其进行解构。这给了你一种进口的感觉，而不是跳过箍。

// Normal Imports
import Foo from "Foo";

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

Answer 3

我能够通过使用 imports-loader 和 exports-loader

来实现这一点

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

Webpack 如何将 shim 模块包裹在 window 闭包中？

Webpack how to shim module wrapped in window closure?

javascript

shim

webpack