如何让 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'

  }

};