带有共享文件夹的打字稿前端和后端版本

Question

我正在考虑改用打字稿，但是在前端和后端文件夹之间如何共享方面苦苦挣扎？

我想出了这个项目结构：

frontend
- src
-- server.ts
-- functions
- dist
- package.json
- tsconfig.json
- node_modules
backend
- src
-- client.ts
-- functions
- dist
- package.json
- tsconfig.json
- node_modules
shared
- src
-- functions
---- doSmth.ts
-- index.ts
- dist
- tsconfig.json

问题是：

1. 使用哪种方法从后端或前端访问共享功能和数据？我应该使用项目参考并构建比前端或后端先共享的项目吗？还是我应该以某种方式在后端或前端内部获取共享文件夹？
2. 也许有一个简单的示例说明如何设置tsconfig.json，因此 会工作吗？

打字稿文档令人困惑，无济于事：（

我现在得到的只是一团糟：

Answer 1

您可以在根文件夹中使用两个配置文件来执行此操作，例如tsconfig.client.json和tsconfig.server.json，具有不同的构建规则。要进行编译，请运行其中一个或两个

tsc --project tsconfig.client.json
tsc --project tsconfig.server.json

来自the docs（突出显示了相关部分）：

  

通过调用不带输入文件的tsc和--project（或仅-p）命令行选项来指定包含tsconfig.json文件的目录的路径，或指向有效.json文件的路径包含配置。

Answer 2

你可以不用

-- index.ts
- dist
- tsconfig.json

在shared下。如果可以消除某些事物，那么可能应该是为了使事物尽可能简单。消除之后，shared的形状如下：

shared
- src
-- utils
--- hashString.ts

通过这种安排，您可以从import {hashString} from "../../../<relative path>/shared/src/utils/hashString"或.ts下的任何frontend文件内部backend。然后有选择地为所有其他hashString（或frontend）导入重新导出backend。

Answer 3

我能够制作简单的后端/前端并导入任何共享数据，如下所示：

import { clone, sharedInfo } from '@shared'

要执行此操作，您需要使用tsconfig.json路径，模块别名和webpack别名。

这里是link to github example。

Answer 4

我强烈建议使用Nx workspace management工具，因为该工具是专门为解决此代码共享问题而构建的。您可以在存储库中简单地创建一个库，然后将该库导入任何地方（请参阅：https://nx.dev/angular/tutorial/08-create-libs）。甚至可以通过流行的框架（如react，angular，nestjs等）方便地增强前端和后端应用程序。您可以将整个代码库（前端+后端）保留在一个monorepo中，这是代码共享，依赖项管理和共享工具的理想设置。 Nx让您轻松管理此TypeScript monorepo，并为您设置了很多必要的基础结构，如棉绒，测试自动化和代码共享。我和我的团队现在已经严重依赖Nx超过6个月了，无法想象没有它管理TypeScript存储库，请尝试一下！ https://nx.dev

如果不适合使用Nx，则可以对实现的代码共享方式进行建模：

1. 创建一个新文件夹
2. 添加一个index.ts文件，该文件导出应从库外部访问的所有内容
3. 在tsconfig.json-> compilerOptions-> paths内添加一个条目，该条目指向您的图书馆的index.ts
4. 通过您在tsconfig.json内指定的导入名称导入共享代码