我最近一直在尝试使用外部包构建我的gatsby(react(站点。这个包的链接是"；https://github.com/transitive-bullshit/react-particle-animation"。
由于我只能选择更改组件详细信息中的道具，因此我无法读取/写入包文件，因为它不包含在"gatsby build"的公用文件夹中，所以最终所有组件都会聚集在一起。
我尝试过的：
- 在本地编辑包文件，这只在我的机器上有效，但当我将其推送到netlify时，它只接收公共文件夹和相应的package.json文件，而不是"节点模块文件夹"，我无法让netlify读取我自己更改的文件，因为它直接从github页面请求它
作为我从对这个问题的评论中找到的解决方案，我们可以使用"；补丁包"；将我们的修复保存到节点模块，然后在任何需要的地方使用它。这真的对我有用！
为了解释我是如何修复它的：(因为它的大部分已经写在"补丁包DOCS"中(，所以提到了要点：
- 我首先对本地程序包文件进行了更改，导致出现错误。(对我来说，它们在我的node_modules文件夹中(
- 然后，我使用补丁包文档来指导自己完成其余的工作
- 在我将更改推送到github之后，它就工作了，所以现在，Patch Package总是给我node_module的编辑版本
当处理在Gatsby中使用window的第三方模块时，您需要将null加载程序添加到其自己的webpack配置中，以避免SSR期间的转换(Sserver-SideRendering(。这是因为gatsby develop出现在浏览器中(其中有window(，而gatsby build出现在节点服务器中，其中显然没有window或其他全局对象(因为它们甚至还没有定义(。
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/是正确的名称。
使用修补程序包可能会起作用，但请记住，您正在添加一个额外的程序包，这是另一个可能影响网站性能的捆绑文件。建议的代码片段是一个内置的解决方案，在构建应用程序时会被激发。