如何在React中创建静态网站生成器

Question

技术栈- Node.js，MongoDB用于数据库，斯特拉皮 CMS用于编辑和API，React我的应用程序。

我有一个数据库，有一个长长的条目列表和一个现成的应用程序，允许用户从数据库中读取数据。我需要能够生成一个简单的网站与一个实体从我的数据库作为一个来源，以填补模板。

模拟模型

这是一个模拟模型。希望它能让事情变得更清楚一些。

澄清

经过一天的思考任务，我相信我需要像一个最简单的静态网站生成器--一个应用程序，可以让我从列表中选择一个数据，并生成一个小的网站充满它。最终的目标是在我的应用程序的某个子文件夹中获得一个网站，在那里我可以得到它并使用它，不管我需要什么。

更多关于细节的内容：

• 它将在当地使用。
• 安全可以忽略
• 始终在开发中运行并不是一个问题(只是以防万一，考虑其他问题#2)

很少有其他问题：

1. 是否可以从应用程序(如npm build)运行NPM脚本？
2. 是否有任何方法在开发模式中显示一个组件，但在生产的构建过程中用另一个组件替换？

    App.js
    //...

    function App() {
    if() {
      return <AdminUI /> // This one is to be shown in development mode
    } else {
      return <Website /> // This one is to be used instead of AdminUI in the build
    }

更新

嗯，我正在挖掘一条创建站点生成器的路径，到目前为止，我提出了以下基本计划：

• 准备好我的模板
• 为我的网站创建一个新目录
• 将模板复制到新文件夹
• 获取HTML文件，将其解析为字符串以进行修改
• 用我的数据交换一些数据
• 从修改后的字符串保存到文件
• 如果需要对其他文件重复。

如果这如预期的那样，整个过程可能会改进，从一个固定的模板转移到一个组件，该组件将由一个JavaScript绑定程序准备，并在节点-cmd(从我的应用程序中运行shell命令)之类的东西的帮助下开始.

Answer 1

您想要的是可以实现的，但是如果它只是一个字符串而没有其他，我会说，在启动时从给定的文件中获取数据并从那里填充要简单得多。您可以将一个JSON文件放在公用文件夹下(以及其他静态数据，如图像)，并将该文件作为您的配置。

在App.js文件中，编写一个异步componentDidMount()，您可以使用您的配置执行等待axios.get("")。

因此，App.js看起来像(动态编写的代码，没有签入IDE)：

  export class App extends React.App {
    constructor(props) {
      super(props);
      this.state = { loading: true, };
    }
    async componentDidMount() {
      const response = await axios.get("your/data.json");
      this.setState({ loading: false, ... whatever})
    }

    render = () => (
      <>
         (this.state.loading && <div>Still loading...</div>)
         (this.state.adminData && <AdminUI data={this.state.admingData} />)
         (this.state.devData && <Website data={this.state.devData} />)
      </>
    )
  }

如果你不关心安全，就不会像这样简单吗？如果您使用TypeScript，您在处理数据方面也会有一个简单得多的生活。

可能值得使用AdminUI来生成JSON，而另一个UI则读取JSON，因此您最终会执行两个UI。模板生成的UI甚至可以要求一个JSON文件直接引导用户，如果它简化了.一般来说，基于简单JSON的方法听起来比使用CI/光盘管道要简单得多。