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

Question

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

- ROODAY

---

我应该把 import window from 'window'; 语句放在哪里？如果我把它放在我的组件中，那么在库中构建时会出现无法解析 window 的情况。如果我将其放在引入我的组件的应用程序内部，同样也会出现相同问题。(如果忽略这个问题，将会收到 React 错误 321) - ROODAY

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'
  }
};

-From docs

- Raz Ronen

---

非常感谢您，您是救星！ - ROODAY

我现在正在抓狂，因为无论我将 "globalObject" 设置为什么，它总是在某个地方被覆盖，并且始终编译为 "self"。 - Native Coder