如何组织 Javascript 项目以允许在客户端 SPA 和节点服务器之间共享代码答案

【问题标题】：How to organize Javascript project to allow sharing of code between client SPA and Node server如何组织 Javascript 项目以允许在客户端 SPA 和节点服务器之间共享代码
【发布时间】：2018-06-21 17:34:07
【问题描述】：

我正在开发一个包含 SPA 前端和 Rest 后端的应用程序。

为了实现 Rest 后端，我使用 Node 和 Express。

考虑到前端和后端都是用 JavaScript（和 TypeScript）编写的，我想在这两部分（即接口和简单实用程序）之间共享一些代码。

所以基本上我的项目由三部分组成：Client、Server、Shared。因此我倾向于有一个类似这样的项目目录结构：

ProjecFolder
   ClientFolder
     .....
   ServerFolder
     .....
   SharedFolder
     .....

我正在寻找有关如何最好地组织我的项目的建议。我做了一些研究，发现这个interesting article 建议使用基于 Gulp 任务的机制，将所有文件从 SharedFolder 复制到 ClientFolder 和 ServerFolder 中，然后运行转换。

我想知道是否可以使用替代方法或工具来执行必须配置为 Gulp 工作流的操作。

【问题讨论】：

拆分代码！在同一个项目中前后部署 Imo 是个坏主意
Webpack 可以在不手动复制文件的情况下生成两个包，并且使用tree-shaking 你的两个包应该只包含他们需要的内容。

标签： javascript node.js angular typescript

【解决方案1】：

我的建议是使用包管理器工具。当您有依赖关系并且服务器的要求发生变化时，您必须更改模块。当您需要对服务器进行更改时，您不希望 SPA（前端）中断。

这就是包管理器为您提供版本的原因。每个依赖于您的共享代码的模块都可以使用它的不同版本。您可以为此使用 NPM。构建一个模块，发布它，并将其安装在您的前端和后端。

很多时候，在生产中，您会拆分前端和后端。前端可能存在于文件存储系统（S3、Google Cloud Storage 等）中，而后端则在您的服务器上执行。那么在两个系统上使用相同的文件将更加困难。

【讨论】：

我同意将代码分开。事实上，我确实分别编译客户端和服务器，我可以独立部署它们。仍然有一些事情是客户端和服务器都应该尝试始终保持同步，以避免意外。例如，通过 Rest apis 进行 Jsons 交换的结构就是这种情况，我使用 Typescript 接口对其进行建模。因此我的问题。无论如何，我很欣赏使用包管理器的建议。