Gatsby构建期间检索文件内容
我需要提取程序源文件的内容,以便在Gatsby生成的页面中显示。我已经整理好一切,可以打电话了
// my-fancy-template.tsx
import { readFileSync } from "fs";
// ...
const fileContents = readFileSync("./my/relative/file/path.cs");
但是,在运行gatsby develop
或gatsby build
时,出现以下错误
找不到此依赖项:⠀* ./src/templates/my-fancy-template.tsx中的fs⠀要安装它,您可以运行:npm install --save fs
但是,all the documentation建议该模块是Node 除非的本机模块,它正在浏览器中运行。我还不太熟悉Node,但是由于gatsby build
也失败了(该命令甚至无法启动本地服务器),如果这是问题,我会有些惊讶。
我什至从新的测试站点(gatsby new test
)尝试了同样的效果。
我在侧边栏中找到this并给了一个镜头,但似乎[[declared] fs
可用;它实际上没有提供fs
。
render
这些页面。这可能是一个错误的评估,但最终导致了我需要的解决方案:- 您需要在
File
中的gatsby-source-filesystem
期间将文件内容添加到exports.onCreateNode
上的字段中(假设您正在使用gatsby-node.js
)。您可以通过通常的方式进行此操作:if (node.internal.type === `File`) { fs.readFile(node.absolutePath, undefined, (_err, buf) => { createNodeField({ node, name: `contents`, value: buf.toString()}); }); }
- 然后您可以在
my-fancy-template.tsx
内的查询中访问此字段:{ allFile { nodes { fields { content } } } }
从那里,您可以在fields.content
的每个元素内自由使用allFile.nodes
。 (这当然也适用于file
查询方法。)自然,如果有人有一个更优雅的解决方案,我会欣喜若狂:-)