连接客户端和服务器端打字稿项目

Question

我有一个根项目，其中包含我的服务器端和客户端应用程序，其结构大致如下：

-- server
  -- node_modules
  -- index.ts
  -- package.json
  -- ...
-- client
  -- node_modules
  -- index.ts
  -- package.json
  -- html/
  -- css/
  -- ...

我正在寻找最好的方法来编译所有这些并使服务器可以访问客户端静态文件。我通过将outDir 项目的outDir 设置为../build 并将client 项目的设置为../build/static 进行了尝试。不幸的是，这不起作用，因为tsc 不适用于项目根文件夹之外的文件（例如，无法从构建中调用节点模块，如果我错了，请纠正我！）。
另外，如果我可以监听打字稿文件中的更改并在检测到此类更改时自动构建该文件，那就太好了。

我研究了 gulp、Webpack 和 parcel 等选项，但我不确定最好和最简单的解决方案是什么。

我让它工作的一种方法是为server 和client 使用一个项目。如下结构：

-- node_modules
-- package.json
-- index.ts
-- server/
-- static/
--   html/
-- ...

但是这样一来，客户端和服务器端都只有一个node_modules 文件夹和一个package.json 文件，这可能不是最好的方法（再次，如果我错了，请纠正我！）。

Answer 1

crisp-react 拥有服务器和客户端项目。

与您的设置的相似之处：
- 项目位于server/ 和client/ 目录
- 每个项目都有自己的package.json 和node_modules/
- 使用打字稿
- 服务器可以访问客户端静态文件
- 自动构建。有源代码更改时自动重建客户端的使用场景。这称为实时重新加载。服务器代码也是如此，它会在您键入源代码更改时自动重建。

有什么不同：
- 没有 css/ 目录，因为每个客户端组件的 CSS 都在组件的 .tsx 文件中
- 没有 html/ 目录，因为 .html 文件是自动生成的。

拥有一个 package.json 和 tsconfig.json 听起来不是一个好主意，因为依赖项和设置完全不同。