node.js - 在 Gatsby 构建期间检索文件内容

Question

我需要拉入程序源文件的内容以显示在 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 )尝试了这个，效果相同。

Answer 1

我找到了this在侧边栏中试了一下，但似乎它刚刚声明了 fs可用；它实际上并没有提供 fs .

然后让我感到震惊的是，虽然 Gatsby 在构建时创建页面，但在需要它们之前它可能不会呈现这些页面。这可能是一个错误的评估，但它最终导致了我需要的解决方案:

您需要将文件内容添加到 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 查询方法。)

当然，如果有人有更优雅的解决方案，我会欣喜若狂:-)