NodeJS/ExpressJS/HandlebarsJS 全栈项目的目录结构

Answer 1

如我所见，您需要对 monorepo 结构进行解释。

关于问题：

#1

您是否按 client/ 和 server/ 分开？

如果/server 为您的全栈项目中的/client 提供HTML 和其他静态内容，那么以不同的方式进行操作会更有意义。例如像这样：

将/src 文件夹视为/server 文件夹，将/public 视为/client。

#2

你有两个node_modules/ 目录和两个各自的 package.json，一个用于客户端，另一个用于服务器？

我们在一个 monorepo 中工作，我们所有的模块都是嵌套的。由于我们的项目结构，前端无论如何都不是免费的，所以不需要单独的node_modules和package.json。

#3

如果拆分它们，您将使用的templates/ 和views/ 放在哪里？ 服务器生成html代码给客户端？

我们没有将它们分开。所以所有的工人都去/src。只有静态部分进入/public。

---

有什么问题，发生了什么？

- Monorepo：例如，我们有一个非常繁忙的社交媒体应用程序。用户每天上传数百万张照片。为了无缝交付，我们需要扩展我们的服务器。我们选择horizontal scaling 作为解决方案。但问题是什么？问题：我们只想扩大照片服务/上传部分，但由于我们的结构，我们不得不以额外费用来扩大一切。所以假设没有新成员加入我们的应用程序，所以这部分很舒服，但我们无缘无故地扩大了它。

- Node/Express 提供静态文件：只是个坏主意。您不应该使用您的应用程序服务器（尤其是 express）来提供静态内容，如 html、css、js 和其他库。为他们提供服务的最佳方式是通过内容分发网络 (CDN)。或者，然后从您的 Web 服务器（nginx 或 apache）提供服务。

- 不必要的混乱：如您所见，一切都非常复杂，并且模块是相互关联的。测试、分享、与团队合作都非常困难。如果我们以后想对我们的结构做一点小小的改变，可能需要付出很大的努力。

---

怎么可能更好？

首先，您必须完全分离前端和后端。您可以将 Express 用作 API 服务器。您可以将 React、VueJs、Angular 等框架用于前端。没关系，它也可以是纯 JS/CSS/HTML。您可以使用 Nginx 或 Apache 等服务器为它们提供服务。

尝试使您的项目适应微服务架构。微服务架构既可以降低复杂性，又可以在未来的任何结构变化中为您提供便利。而且很容易测试。在这条路上，Docker 可以成为你非常好的朋友。

如果你仍然想留在 monorepo 架构中，你可以继续使用我在关于问题部分中提到的方式，它没有问题，此外，阅读 this blog 很有用。

---

额外的

所以在/public 你只放静态内容？如果与客户相关，为什么views/ 转到/src？

想想我们的 monorepo 方法分为三个部分：

1. 静态
2. 静态和动态的混合
3. 动态。

   1.静态：例如，当我们说example.com/css/style.css 时，它应该直接为我们提供我们的 css 文件（与我们在本地拥有的相同）。或者，当我们右键单击网站上的任何照片并在新选项卡中打开图像时，它应该会将您重定向到example.com/img/the_image.jpeg 之类的地址。一切都准备好了，只需要送达即可。这就是我们这里所说的“静态”。只有那些去/public。

   2. 动静结合：我们的代码获取数据，填写必要的位置，然后将填充了数据的页面呈现给用户。而这一切都发生在/views 文件夹中。可以看到，这里有一个编译过程，结果一开始还没有准备好。所以它不能被称为“静态”。

   如果前端和后端是分开的。我们的前端 javascript 代码将对我们的后端服务器进行 fetch 调用，它会获取必要的数据并自行填充。而这一切都将发生在独立于服务器的浏览器上。 （这是一个纯客户端渲染的例子。看看SSR vs CSR）

   （这项工作有很多选择和不同的方法（使用 ejs、pug、handlebars 或 react、vue、angular），如果我们再进一步，这将是一个基于意见的答案。或者它已经是一个基于意见的答案，它会更多）

   3.动态：我们的常规后端代码。