Gatsby构建时获取源码文件内容遇fs依赖未找到错误求助

为什么会出现这个错误？ #

你说得没错，fs确实是Node.js的原生模块，但Gatsby的组件代码最终会被Webpack打包后在浏览器环境中运行——浏览器里根本没有fs这个模块，所以Webpack在打包时会提示找不到它。哪怕你是在执行gatsby build（Node环境下的构建过程），但组件本身会被编译到浏览器端执行，直接在组件里调用fs肯定会触发报错。

正确的解决方案：在Node环境API中读取文件，再传递给组件 #

Gatsby提供了一系列在Node环境下运行的API（比如gatsby-node.js里的createPages），我们可以在这里完成文件读取操作，然后把内容通过页面上下文（pageContext）传递给模板组件。

步骤1：修改gatsby-node.js，读取文件并传递内容

如果你的项目里还没有gatsby-node.js，在项目根目录新建一个，然后写入以下代码：

const path = require("path");
const fs = require("fs");

exports.createPages = async ({ actions }) => {
  const { createPage } = actions;

  // 用绝对路径读取文件，避免相对路径在不同环境下的问题
  const targetFilePath = path.resolve(__dirname, "./src/my/relative/file/path.cs");
  const fileContent = fs.readFileSync(targetFilePath, "utf8");

  // 创建页面时，把文件内容放入context
  createPage({
    path: "/your-fancy-page", // 你想要的页面访问路径
    component: path.resolve("./src/templates/my-fancy-template.tsx"),
    context: {
      fileContent: fileContent,
    },
  });
};

步骤2：修改模板组件，从pageContext获取内容

现在你的模板组件不需要再引入fs了，直接从页面上下文中拿到文件内容即可：

import React from "react";
import { PageProps } from "gatsby";

// 定义上下文的类型，让TypeScript有类型提示
interface TemplateContext {
  fileContent: string;
}

const MyFancyTemplate: React.FC<PageProps<TemplateContext>> = ({ pageContext }) => {
  const { fileContent } = pageContext;

  return (
    <div>
      <h1>我的源码文件内容</h1>
      {/* 用pre标签保留代码的格式 */}
      <pre>{fileContent}</pre>
    </div>
  );
};

export default MyFancyTemplate;

额外说明 #

如果你的需求是动态读取多个文件、生成多个页面，只需要在gatsby-node.js里遍历目标文件目录，循环调用createPage即可——所有文件读取的逻辑都放在Node环境运行的gatsby-node.js里，组件只负责接收和渲染内容，这样就不会再遇到fs模块找不到的问题了。

内容的提问来源于stack exchange，提问作者Sean Allred