如何基于React开发支持从MongoDB选数填充的本地静态网站生成器

• 应用内部运行NPM脚本：完全可以实现，本地无安全约束的场景不需要引入node-cmd这类第三方依赖，直接用Node内置的child_process模块即可，相比第三方工具稳定性更高。比如通过execFile调用本地npm进程执行构建脚本，全程本地运行没有权限限制。
• 环境差异化渲染组件：完全可以实现，不需要手动编写复杂判断逻辑。React生态的主流构建工具（Vite/CRA等）会内置暴露环境标识常量，你示例中的if分支直接把判断条件换成import.meta.env.DEV即可——开发环境启动时自动渲染AdminUI组件，执行生产构建时自动切到Website组件，零额外配置。

// 可直接复用的示例代码
import AdminUI from './AdminUI'
import Website from './Website'

function App() {
  // 开发模式展示AdminUI，生产构建自动切换为Website
  if (import.meta.env.DEV) {
    return <AdminUI />
  }
  return <Website />
}

完全顺着你梳理的基础流程优化，全程贴合你现有的Node.js技术栈，不需要引入Astro、Hugo这类重型静态生成框架，按两步走就能跑通：

第一版快速验证（10分钟完成，匹配你最初的实现思路） #

• 提前准备带统一占位符标记的静态HTML模板，占位符统一用{{字段名}}格式，和你MongoDB、Strapi里存储的实体字段一一对应

• 用Node内置的fs模块实现核心逻辑，不需要额外安装依赖：

  1. 按用户选的实体ID，从数据库拉取对应单条实体的完整数据
  2. 在项目固定子路径（比如./generated-sites/[实体ID]）创建输出目录
  3. 递归扫描模板目录下的所有文件，读入文件内容
  4. 把文件内容里的所有{{占位符}}，和拉取到的实体数据做一一字符串替换
  5. 把替换完成的内容写入对应的输出目录文件
  6. CSS、JS、图片这类静态资源直接原样复制到输出目录即可

  核心逻辑参考实现：

  const fs = require('fs/promises')
  const path = require('path')
  
  async function generateSingleSite(entityData, outputId) {
    const outputRoot = path.resolve(__dirname, `./generated-sites/${outputId}`)
    const templateRoot = path.resolve(__dirname, './site-templates')
    // 自动创建输出目录，已有内容直接覆盖不报错
    await fs.mkdir(outputRoot, { recursive: true })
    // 递归扫描所有模板文件
    const templateFiles = await fs.readdir(templateRoot, { recursive: true })
    for (const relativePath of templateFiles) {
      const fullTemplatePath = path.join(templateRoot, relativePath)
      const fileStat = await fs.stat(fullTemplatePath)
      // 跳过目录，只处理普通文件
      if (!fileStat.isFile()) continue
      let fileContent = await fs.readFile(fullTemplatePath, 'utf-8')
      // 批量替换占位符，本地场景不需要做复杂的转义校验
      Object.entries(entityData).forEach(([field, value]) => {
        fileContent = fileContent.replaceAll(`{{${field}}}`, value)
      })
      await fs.writeFile(path.join(outputRoot, relativePath), fileContent)
    }
  }
  

  这一版跑通后，你就可以在AdminUI里加个“生成站点”按钮，点击触发上面的函数，直接把对应站点输出到项目子文件夹。

第二版体验优化（基础流程验证通过后再迭代） #

• 把原来的静态HTML模板替换成你熟悉的React组件，组件只接收entityData作为props渲染内容
• 复用你项目现有的Vite构建配置，加一个独立的构建入口，执行构建时把拉取到的实体数据通过Vite的define常量注入到组件里，构建完成的静态文件直接输出到目标子文件夹
• 不需要自己搭bundler、调用shell命令的逻辑，所有流程都可以在Node环境里串起来，和你最初设想的优化路径完全匹配

因为你是纯本地使用、不需要考虑安全问题，整个流程不需要做输入校验、沙箱隔离这些额外处理，能最快对齐需求。

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