如何让webpack在打包时不使用window对象？

Question

我正在制作一个 React 组件库来抽象出我在多个项目中使用的一些组件。有些项目是用 CRA 制作的，有些是用 Gatsby 制作的，有些可能是其他东西，等等。我使用了 Neutrino.js 框架/工具链，因为它链接在 React 文档网站上，但我遇到的问题是默认情况下输出构建的文件都使用该window对象，这会导致gatsby build破坏，因为windowNode/SSR 中不存在该对象。有没有办法让 Neutrino/webpack 输出一个不使用窗口的包？在寻找解决方案并与其他库进行比较时，似乎 ESM 是最好的，但我不确定如何让 webpack 使用它，我认为它目前不受支持。我还应该使用其他工具吗？

Answer 1

将globalObject配置添加到您的 webpack 配置中：

output: {
    globalObject: "this",
  },

默认为window

例如：

要使 UMD 构建在浏览器和 Node.js 上都可用，请将 output.globalObject 选项设置为“this”。

module.exports = {
  // ...
  output: {
    library: 'myLib',
    libraryTarget: 'umd',
    filename: 'myLib.js',
    globalObject: 'this'
  }
};

-来自文档