具有动态 HTML 后端和 javascript 前端的应用程序的项目树答案

【问题标题】：Project tree for app with dynamic HTML backend and javascript front-end具有动态 HTML 后端和 javascript 前端的应用程序的项目树
【发布时间】：2021-02-18 11:26:31
【问题描述】：

我有一个小型宠物项目，它是一个单页应用程序（Node.js + express.js + EJS 视图），其中还包括客户端 JavaScript。我已经使用简单的项目结构开始了项目结构的后端部分，该结构由捆绑所有服务器端 JavaScript 的 ./src 结构和用于服务所有静态位的 ./public 结构组成。但是，我不清楚客户端 javascript 应该如何适应这个项目结构。

关于 Node.js 的其他 stackoverflow 问题，such as this one，建议服务器端代码应存储在 ./lib 中，客户端代码应存储在 ./app 中，但对我而言，参考没有意义将服务器端代码作为库代码。其他来源，例如非权威博客文章，将 ./lib 替换为 ./server 并收工。但是，这看起来不像是一种改进。

由于客户端 javascript 与 EJS 视图一起提供服务，因此将项目拆分为服务器端项目和客户端项目没有多大意义。

考虑到这一点，为基于 Node.JS+EJS+模板视图的单一时代应用程序组织项目结构的最佳方式是什么？

【问题讨论】：

标签： node.js express single-page-application

【解决方案1】：

上面提到的将项目划分为 ./client 和 ./server 的结构，我已经看到它在 React 项目中与单页应用程序一起使用。但是这个需要运行 node 两次或者使用一个新的包来处理它。

我正在使用与您相同的堆栈，我推荐与其他主题中所述相同的堆栈，对于专业的快速应用程序，使用简单：

/
  /bin - scripts, helpers, binaries
  /lib - your application
  /config - your configuration
  /public - your public files
  /test - your tests

现在还有其他选项，我建议您将服务器端文件 .gitignore 和 .env 留在根文件夹中。其余的你把所有的东西都放在一个客户端文件夹或者你为你的应用程序选择的任何名称中。为了在您的项目中快速更新，您可以添加包 Express Generator 并在全局范围内安装它。它目前带有以下依赖项：

  "dependencies": {
    "cookie-parser": "~1.4.4",
    "debug": "~2.6.9",
    "ejs": "~2.6.1",
    "express": "~4.16.1",
    "http-errors": "~1.6.3",
    "mongodb": "^3.6.6",
    "morgan": "~1.9.1"
  }

使用这个命令：express -e client

您最终应该得到这样的项目结构：

client/
  /bin - scripts, helpers, binaries
  /public - your public files
  /routes - exporting your home route
  /views - your views and partials for EJS

您还可以咨询一些著名的项目，以构建带有所需文档的大型 node.JS 项目的模式，这里是一个Sails JS。

【讨论】：