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

【问题标题】：How to make webpack not use the window object when bundling?打包时如何让webpack不使用window对象？
【发布时间】：2020-08-06 00:23:31
【问题描述】：

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

【问题讨论】：

我应该把`import window from 'window';`语句放在哪里？如果我把它放在我在库中构建的组件中，我会得到一个无法解析的窗口，当我把它放在导入我的组件的应用程序中时也会发生同样的情况。（如果我忽略它，我会得到反应错误 321）

标签： javascript reactjs webpack module

【解决方案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'
  }
};

-来自文档

【讨论】：

非常感谢，你是救命稻草！
我现在正在拔头发，因为无论我将“globalObject”设置为什么，它都会被覆盖，总是编译为“self”stackoverflow.com/questions/67872307/…