在后端、react 和 react-native 客户端之间共享 typescript 代码

Posted 2023-03-07

【中文标题】在后端、react 和 react-native 客户端之间共享 typescript 代码

【英文标题】：Sharing typescript code between backend, react and react-native clients

【发布时间】：2018-01-15 20:39:39

【问题描述】：

我已经开始将我的项目转换为 typescript，同时我决定改进 node.js 后端、react web 客户端和 react-native 移动客户端之间的代码重用。

这是我的项目结构：

 ├ 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 s-s-r needed, depends on clients)
 ├ mobile (react-native client, depends on clients)

到目前为止我已经尝试过：

符号链接。无法让它们与 react-native 一起使用（请参阅 metro bundler issue）。 这可能可以通过使用 haul 来解决，但是通过使 haul 与 typescript 一起工作会增加额外的复杂性。此外，我用来发布移动应用的 Mobile Center 似乎无法使用 haul 在 tsconfig.json 中使用 rootDirs 或 paths。 Typescript 编译器不合并/捆绑输出，所以这意味着我需要支持 3 种不同的解决方案来合并生成的代码。也不适用于我的 IDE。 使用WML。我尝试了两种方法： 将 commons 和 clients 链接到 web/mobile/server 的 node_modules 内的包。为此，我必须生成声明，这很麻烦，因为它需要公开所有导入（请参阅this issue）。也不能很好地与纱线一起使用，每次安装新东西时都会删除链接的包。 将commons 和clients 链接到Web、移动和后端源文件夹内的单独源文件夹。这是我在我的项目的当前 JS 版本中使用的。它有效，但它有一些缺点： 长相对导入（可能可以通过支持 3 种不同的模块别名解决方案来解决） wml 有时会在后台中断，虽然容易发现错误，但会导致一些混乱 不适合热重载

我正在寻找一种不太复杂的解决方案（在网络/移动/后端方面需要最少的配置）并且可以很好地与 Webstorm 配合使用。 它现在可能不存在，所以我想听听这里的人们在类似的项目设置中使用了哪些其他解决方案。

【参考方案1】：

在与您类似的情况下，我做了以下事情：

commons 发布为单独的 npm package。如有必要，您可以将其设为私有。

clients 依赖于 commons 包并且也被发布到 npm。再次 - 如果需要，请保密。

web 和 mobile 项目都重用了上面创建的 npm 包。

【讨论】：

所以你必须在每次更改这些包中的某些内容时发布commons 和clients，然后你必须更新web 和mobile 和backend 中的依赖关系？如果手动完成，这很烦人，尤其是现在我经常迁移和更改内容时。此外，这种方法受声明问题的影响太大。但是，如果共享代码不经常更改，我认为这是一种明智的方法。

你是对的。在我的情况下，当项目已经稳定时 - 变化不会经常发生，因此这不是问题。当然，正如您所说 - 如果它很麻烦，您总是可以制作一个脚本来立即运行这些操作。