Question

我最近一直在尝试使用外部程序包构建我的gatsby（反应）站点。该软件包的链接为“ https://github.com/transitive-bullshit/react-particle-animation”。

由于我只能选择从组件详细信息更改道具，因此我无法读取/写入最终将所有文件放在一起的软件包文件，因为它不包含在“ gatsby-build”的公用文件夹中。

我尝试过的事情：

在本地编辑该软件包文件，该文件仅在我的机器上有效，但是当我将其推送到netlify时，它仅接收公用文件夹和相应的package.json文件，而不是“ node-modules文件夹”，因此我无法进行netlify读取我自己更改的文件，因为它直接从github页面请求它。

作为我从对该问题的评论中找到的解决方案，我们可以使用"Patch-Package"将修补程序保存到节点模块，然后在需要的地方使用它。这实际上对我有用！

要解释我如何解决它：（由于大多数内容已经写在“补丁程序包DOCS”中，所以要提一下要点：

我首先对提供错误的本地软件包文件进行了更改（对我来说，它们在我的node_modules文件夹中）
然后我使用补丁程序包文档来指导我自己完成其余部分。
在我将更改推送到github后工作了，现在，Patch Package始终为我提供了node_module的编辑版本。

Answer 1

在Gatsby中处理使用window的第三方模块时，您需要向其自己的Webpack配置中添加null加载程序，以避免在SSR（服务器端渲染）期间进行编译。这是因为gatsby develop发生在浏览器中，而gatsby build发生在显然没有window or other global objects的节点服务器中。

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
  if (stage === "build-html") {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /react-particle-animation/,
            use: loaders.null(),
          },
        ],
      },
    })
  }
}

请记住，test值是一个正则表达式，它将与node_modules下的文件夹匹配，因此，请确保/react-particle-animation/是正确的名称。

使用patch-package可能有效，但请记住，您要添加另一个软件包，另一个捆绑的文件，这可能会对性能产生影响。提议的代码段是内置的解决方案，会在您构建应用程序时发生。

盖茨比构建失败-服务器端渲染期间错误“窗口”不可用

1 个答案: