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

Question

我正在制作一个 React 组件库来抽象出我在多个项目中使用的一些组件。有些项目是用 CRA 做的，有些是用 Gatsby 做的，有些可能是别的东西，等等。我使用了 Neutrino.js 框架/工具链，因为它链接在 React 文档网站上，但我遇到的问题是默认情况下输出构建文件都使用 window对象，这会导致 gatsby build中断为 window在 Node/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'
  }
};

-来自文档