Javascript 组织一个客户&；服务器SPA/Node.js应用程序

我正在编写一个带有Node.js后端和单页web应用前端的应用程序

为了简化和加快开发速度，我将客户机和服务器逻辑保持在同一个项目中

我正在考虑如何最好地组织这些文物

js部分很简单，因为它不需要经过一组预处理器（透明化、缩小、串联等）

前端需要按照上面的步骤进行转换，我想应该放在

dist

文件夹中

当前的文件层次结构如下所示：

my-app
 - src
   - client
   - server

我应该将客户机工件的dist文件夹放在src/client下吗

是否有人尝试过这种方法并发现了问题

我正在使用Heroku（一个使用git的部署系统）

---

为客户端提交构建的工件感觉是错误的，但是如果我想通过推送到Heroku来部署它，我认为我需要提交它们。这是否正确？

如果您打算这样做，我会编辑nodejs app.js/index.js以提供静态文件，并将目录指向

dist/

。

---

此外，您还需要告诉express将所有非api请求转发到前端。

这个问题实际上会带来一些自以为是的答案，因此我首先要说的是，这绝不是唯一的方法，但在我看来，这是最容易处理的方法，也是最有意义的方法

预处理后的生产客户机代码应位于

my app/dist

或

my app/dst

，这可能意味着

distribution

或

destination

，具体取决于您如何看待它。无论哪种方式，我的建议是提交此文件夹，因为它为远程调试节省了很多麻烦

例如，如果您的代码在本地工作，但不是远程工作，则使用类似于

postinstall

的钩子来生成

dist

文件夹会在尝试确定程序的问题时添加另一个要检查的可疑对象

提交

dist

文件夹的另一个优点是，它允许您将构建过程中使用的所有包指定为

devDependencies

，而不是

dependencies

。这是一个巨大的优势，可以大大加快部署速度，并减少heroku进程上的内存使用

尽管如此，我仍然建议（正如您可能已经计划的那样）使用自动化的

watch

任务来构建

dist

文件夹，以便于开发，即使您决定不想远程使用相同的构建过程，而是选择提交

dist

目录。您可以将其添加为自定义

npm

命令，例如

npm运行build

，并让它调用您的

gulp

任务

最后一件事。对于那些使用诸如

pug

或

dust

或

ejs

等模板语言而不是

react

或

angular

等框架的人，我建议您确定是否可以运行任何模板来构建将在生产中提供的静态HTML文件

---

如果没有，至少应该按照特定模板语言提供的建议编译模板（不要与运行模板混淆）。通常，他们会建议使用其命令行实用程序生成已编译的模板，这样就不必每次在生产中调用模板时都进行编译。这将使您的node.js服务器更快地响应请求，而代价是使用更多内存来缓存已编译的模板。

您使用的是模板语言吗？这会影响你应该考虑什么样的布局。是的，您应该提交

dist

文件夹，或者让任务使用

npm postinstall

hookClient is react/redux生成它。这就是你要问的吗？是的，这更清楚了。我个人会将

dist

放在根目录下，即

my app/dist

，这似乎是惯例，特别是因为

dist

不是

src

。谢谢。我也有这种想法。你对我问题中的Heroku部分有什么经验吗？我和Heroku一起工作过很多次，提交

dist

文件夹会让你的生活轻松很多。避免这样做是很有可能的，但缺点非常小，优点更容易调试。我刚刚在回答中添加了提交文件夹的另一个原因。我想你会发现这个论点很有说服力。