具有两个输出目录的 TypeScript 共享代码库

Question

我遇到了一个问题：/ 我希望共享代码库“共享”在两个目录中。打字稿本身可以做到这一点，还是我需要一些额外的构建任务？有没有更好的解决方案？

重要提示：“shared”文件夹需要在srv和app中生成，否则我们的核心系统会崩溃。

我有以下src 目录，其中客户端包含一个client.ts，服务器一个server.ts，共享包含一个index.ts。现在我想在client.ts和server.ts中使用shared。

src
   - client
     - client.ts
     - tsconfig.json
   - server
     - server.ts
     - tsconfig.json
   - shared
     - index.ts
     - tsconfig.json

如果我正在编译我的 TypeScript，应该会生成以下输出。

app
   - client
     - client.js
   - shared
     - index.ts
srv
   - server
     - server.js
   - shared
     - index.ts

这是我对每个目录的配置 client/tsconfig.json

{
    "compileOnSave": true,
    "compilerOptions": {
        "target": "es2018",
        "module": "commonjs",
        "noImplicitAny": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "removeComments": true,
        "preserveConstEnums": true,
        "outDir": "../../app",
        "sourceMap": true,
        "diagnostics": true,
    },
    "include": [
        "client.ts"
    ],
    "references": [
        { "path": "../shared"}
    ]
}

服务器/ts.config.json

{
    "compileOnSave": true,
    "compilerOptions": {
        "target": "es2018",
        "module": "commonjs",
        "noImplicitAny": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "removeComments": true,
        "preserveConstEnums": true,
        "outDir": "../../srv",
        "sourceMap": true,
        "diagnostics": true,
    },
    "include": [
        "server.ts"
    ],
    "references": [
        {
            "path": "../shared"
        }
    ]
}

shared/tsconfig.json

{
    "compilerOptions": {
      "declaration": true, 
      "declarationMap": true,
      "composite": true,     
    },
    "include": [
      "*.*"
    ],
    "references": []
}

PS：如果有更好的解决方案来解决这个问题。请告诉我:)

亲切的问候， 塞巴斯蒂安

Answer 1

您可以尝试将 /shared 文件夹转换为单独的 npm 包，然后使用 npm link / npm install 在每个单独的项目中将它们连接在一起？我使用 TypeScript 对 React 和 React Native 做了类似的事情。

Answer 2

Typescript 编译过程不会为您移动或附加文件。它只是为 .ts 文件创建 .js 文件。仅使用 tsc，无法创建捆绑包。

你应该使用像 webpack 这样的打包工具 这是一个可能有帮助的链接：https://webpack.js.org/guides/typescript/

---

话虽如此，我认为您想做的事情是不正确的。我假设您的客户端是单页应用程序，而服务器是提供这些文件的节点服务器？ 如果是这样，您将在节点环境中运行您的服务器并提供 client.js。

您可以捆绑 client.js（使用 webpack 或其他 cli 工具）并直接从 server.js 提供它。 Server.js 不需要 shared.js 或 client.js 位于同一目录中，除非您仅将服务器目录复制到某处。

---

编辑：PS：在大型项目中有针对此类用例的 monorepo 方法。我建议看看 'yarn workspaces' 和 'lerna'