我已经开始将我的项目转换为Typescript,并且同时决定改善代码在Node.js后端、React Web客户端和React-Native移动客户端之间的重用性。
以下是我的项目结构:
到目前为止,我尝试了以下方法:
- 符号链接。无法在 react-native 中使用它们(参见 metro bundler 问题)。可能可以通过使用 haul 解决,但这会增加额外的复杂性,而且 haul 似乎不能与我用于发布移动应用程序的 Mobile Center 兼容。 - 在 tsconfig.json 中使用 rootDirs 或 paths。TypeScript 编译器不会合并/捆绑输出,这意味着我需要支持 3 种不同的解决方案来合并生成的代码。而且在我的 IDE 中也无法很好地工作。 - 使用 WML。我尝试了两种方法:
- 将 "commons" 和 "clients" 链接到 web/mobile/server 中 "node_modules" 内的软件包。为此,我必须生成声明,这是一种负担,因为它要求公开所有导入。而且它也不能很好地与 yarn 兼容,yarn 每次安装新软件时都会删除链接软件包。 - 将 "commons" 和 "clients" 链接到 web、mobile 和 backend 的源文件夹中的单独源文件夹中。这是我在项目当前 JS 版本中使用的方法。它可以工作,但有一些缺点:
- 长相对导入(可能可以通过支持 3 种不同的模块别名解决)。 - wml 有时会在后台中断,导致一些令人困惑但易于发现的错误。 - 与热加载不兼容。
我正在寻找一个解决方案,它不太复杂(在 web/mobile/backend 方面需要最小的配置),并且可以很好地与 Webstorm 兼容。也许现在这个方案不存在,所以我想听听其他人使用类似项目设置的解决方案。
以下是我的项目结构:
├ commons (code shared between backend and frontend, mostly type definitions and utils
├ clients (code shared between web and mobile clients, depends on commons: containers, utils, forms... )
├ backend (express server, depends on commons)
├ web (create-react-app, not ejected, no SSR needed, depends on clients)
├ mobile (react-native client, depends on clients)
到目前为止,我尝试了以下方法:
- 符号链接。无法在 react-native 中使用它们(参见 metro bundler 问题)。可能可以通过使用 haul 解决,但这会增加额外的复杂性,而且 haul 似乎不能与我用于发布移动应用程序的 Mobile Center 兼容。 - 在 tsconfig.json 中使用 rootDirs 或 paths。TypeScript 编译器不会合并/捆绑输出,这意味着我需要支持 3 种不同的解决方案来合并生成的代码。而且在我的 IDE 中也无法很好地工作。 - 使用 WML。我尝试了两种方法:
- 将 "commons" 和 "clients" 链接到 web/mobile/server 中 "node_modules" 内的软件包。为此,我必须生成声明,这是一种负担,因为它要求公开所有导入。而且它也不能很好地与 yarn 兼容,yarn 每次安装新软件时都会删除链接软件包。 - 将 "commons" 和 "clients" 链接到 web、mobile 和 backend 的源文件夹中的单独源文件夹中。这是我在项目当前 JS 版本中使用的方法。它可以工作,但有一些缺点:
- 长相对导入(可能可以通过支持 3 种不同的模块别名解决)。 - wml 有时会在后台中断,导致一些令人困惑但易于发现的错误。 - 与热加载不兼容。
我正在寻找一个解决方案,它不太复杂(在 web/mobile/backend 方面需要最小的配置),并且可以很好地与 Webstorm 兼容。也许现在这个方案不存在,所以我想听听其他人使用类似项目设置的解决方案。
commons
和clients
包内更改内容后,您都必须发布它们,然后必须更新web
、mobile
和backend
中的依赖项?如果手动完成,这很烦人,特别是现在我正在迁移并经常更改东西。此外,这种方法受到声明问题的影响太大。但是,如果共享代码不经常更改,我认为这是一个明智的方法。 - Konstantin Kuznetsov