Question

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

为了简化和开发速度，我将客户端和服务器逻辑保留在同一个项目中。

我正在考虑如何最好地组织工件。

Node.js部分很简单，因为它不需要经过一系列预处理器（转换，缩小，连接等）。

前端需要按照上面的方式进行转换，我想放在dist文件夹中。

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

my-app
 - src
   - client
   - server

我应该在src / client下放置客户端工件的dist文件夹吗？

有没有人试过这个并发现这种方法存在问题？

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

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

Answer 1

如果你打算走这条路，我会编辑nodejs app.js / index.js来提供静态文件并将目录指向dist/。此外，您需要告诉express将所有非api请求转发给前端。

Answer 2

这个问题就是这样，会引发自以为是的答案，所以我首先要说这绝不是唯一的方式，但在我看来，它最容易使用并且最有意义。

预处理后的制作客户端代码应位于my-app/dist或my-app/dst，这可能意味着distribution或destination，具体取决于您的外观在它。无论哪种方式，我的建议是提交这个文件夹，因为它可以为您节省大量的远程调试麻烦。

例如，如果您的代码在本地工作但不能远程工作，那么使用postinstall钩子来生成dist文件夹会增加另一个嫌疑人，以便在尝试确定问题所在时进行检查程序

提交dist文件夹的另一个好处是，它允许您将用于构建过程的所有包指定为devDependencies而不是dependencies。这是 huge plus，使部署速度更快，并且heroku进程的内存使用量更少。

话虽如此，我仍然建议（正如您已经计划要做的那样）使用自动watch任务来构建您的dist文件夹以便于开发，即使您决定不这样做希望远程使用相同的构建过程，并选择提交dist目录。您可以将其添加为自定义npm命令，例如npm run build并调用gulp任务。

最后一件事。对于那些使用pug或dust或ejs等模板语言而非react或angular等框架的人，我建议您确定是否可以运行您的模板用于构建将在生产中提供的静态HTML文件。

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