在 TypeScript Web 应用程序中的客户端和服务器端之间共享代码答案

【问题标题】：Share code between client and server side in a TypeScript web app在 TypeScript Web 应用程序中的客户端和服务器端之间共享代码
【发布时间】：2023-03-27 16:44:01
【问题描述】：

我有一个 TypeScript 项目，我有一个 data(.ts) 文件（包括标题之类的内容），服务器端和客户端都需要它。

我的目录结构如下：

node_modules/
package.json
README.md
src/
    data.ts
    data.js (compiled data.ts)
    server.ts
    server.js (compiled server.ts)
    public/
        sw.ts
        sw.js (compiled sw.ts)
        [other static resources (.css, .html or other .ts)]

src/*.ts 文件是服务器端，src/public/*.ts 文件是客户端。

所以我想同时从 server.ts 和 sw.ts 导入 data.ts 但require 显然在 sw.js 中不起作用。

我该如何解决这个问题？或者什么样的目录结构会更好？

【问题讨论】：

你试过使用模块加载器吗？
主要问题是我无法从客户端请求服务器端文件 - 最好的方法是 Browserify，但我还没有找到任何关于实现它的资源打字稿项目。
tsify 是一个选项，但我不知道如何在同一个项目中使用 tsify 和 tsc。

标签： typescript

【解决方案1】：

我会安排如下

src/
    common/
        data.ts
    server/
        server.ts
    client/
        sw.ts

并将整个内容编译为outDir:../public。也使用 module: commonjs 。

CommonJS 开箱即用，可与 node（服务器）和 webpack（客户端）一起使用。

【讨论】：

抱歉，我没有提到我还有其他资源 - 如何将它们放到 /public 目录中？以及如何使用 webpack 获取更多 .ts 文件？