Gatsby用单个JSON文件调用createPages建页时数据修改不刷新

• Node 原生require机制存在模块缓存：你在gatsby-node.js中直接使用require引入works.json后，Node会将读取到的JSON内容缓存到内存中，后续文件修改后再次调用require也只会返回旧的缓存内容，不会读取最新的文件内容。
• Gatsby 未监听该JSON文件的变更：你没有将works.json纳入Gatsby开发服务的监听列表，Gatsby检测不到这个文件的修改，自然不会触发createPages重新执行，也不会更新页面内容。

步骤1：替换JSON读取逻辑，绕过require缓存 #

将gatsby-node.js中读取JSON的方式从require改为手动读取文件并解析，保证每次执行createPages都能拿到最新的文件内容：

const fs = require('fs')
const path = require('path')

exports.createPages = ({ actions: { createPage } }) => {
  // 手动读取最新文件，绕过require的模块缓存
  const jsonPath = path.resolve(__dirname, './src/data/works.json')
  const jsonContent = fs.readFileSync(jsonPath, 'utf8')
  const projects = JSON.parse(jsonContent)

  projects.forEach(project => {
    createPage({
      // 注意：你给出的JSON示例中只有slug字段，没有id字段，若实际数据无id请替换为project.slug
      path: `/project/${project.slug}`,
      component: require.resolve("./src/templates/project.js"),
      context: project,
    })
  })
}

步骤2：让Gatsby监听JSON文件变更 #

你需要将works.json所在的目录加入Gatsby的监听队列，检测到文件修改后自动触发重新构建：

1. 安装gatsby-source-filesystem插件（如果尚未安装）：
   npm install gatsby-source-filesystem
2. 在gatsby-config.js的插件列表中添加如下配置：

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `data`,
        path: `${__dirname}/src/data/`,
      },
    },
    // 保留你原有其他插件配置
  ]
}

修改完成后重启一次开发服务，之后修改works.json就会自动触发页面更新，无需再手动清理缓存重启。

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