在后端,响应和本地响应客户端之间共享打字稿代码

时间:2017-08-08 10:13:48

标签: node.js reactjs typescript react-native

我已经开始将我的项目转换为打字稿了,同时我决定改进node.js后端之间的代码重用,反应web客户端和本地反应移动客户端。

这是我的项目结构:

 ├ 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 issue)。 这可以通过使用运输来解决,但通过使用打字稿进行运输来增加额外的复杂性。此外,运输似乎不适用于我用于发布移动应用程序的移动中心
  • 在tsconfig.json中使用rootDirspaths。 Typescript编译器不合并/捆绑输出,因此这意味着我需要支持3种不同的解决方案来合并生成的代码。也不能与我的IDE一起使用。
  • 使用WML。我尝试了两种方法:
    • commonsclients链接到网络/移动/服务器node_modules内的包。为此,我必须生成声明,因为它需要公开所有导入(参见this issue)。纱线也不适合,每次安装新的东西时都会删除链接包。
    • commonsclients链接到网络,移动设备和后端的源文件夹中的单独源文件夹。这是我在我项目的当前JS版本中使用的。它有效,但它有一些缺点:
      • 长相对导入(可能通过支持3种不同的模块别名解决方案来解决)
      • wml有时会在背景中断裂,这会导致一些令人困惑但尽管很容易发现错误
      • 不适用于热重装

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

1 个答案:

答案 0 :(得分:1)

在与你类似的情况下,我做了以下事情:

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

  2. clients取决于commons包,也会发布到npm。再次 - 如果需要私人。

  3. webmobile项目都重用上面创建的npm包。