在create react app Reactjs应用程序中使用常见的Sdk模块共享代码库

Question

我想开始一个同时具有web和reactnative接口的新应用程序.

我决定将所有业务 - 非环境依赖代码转移到第三个包-aka sdk-我可以在两者之间共享反应和反应原生.

所以我的项目现在有4个模块

1. 网络 - 用cra创建
2. Sdk - 主要是redux + redux saga +反应容器+ Hoc's
3. 移动 - 反复原生

4. 服务器 - nodejs表达api.

   • 所有的网络,移动和服务器都将依赖于Sdk模块.
   • sdk模块将依赖于服务器模块 - 主要是为了暗示模拟和数据接口.

有没有标准的方法来实现这样的结构？

我很可能会喜欢

• 使用纱线工作区将所有节点模块提升到一个文件夹中,以避免在每个项目中重新安装包
• 我将同时在所有4个项目中工作,所以我需要hotreload才能意识到这一点.

**面临的挑战**

1. Cra不会在src文件夹之外转换代码,所以虽然web项目确实刷新,但是我在sdk上做了更改.它无法理解es6代码.
2. Jest也不了解node_modules中的es6

如何在同时处理sdk和Web模块的同时避免重建步骤？

Answer 1

对于您正在考虑的项目结构，Yarn 工作区听起来是一个很好的方法。

你可以有一个packages目录，你可以在其中添加你的项目：

/packages
  - web
  - sdk
  - native

现在，您可以使用babel来监视每个包的代码更改，babel -w而 yarn 工作区将负责将它们链接在一起。

如果 babel watchers 正在运行，您对 sdk 所做的任何更改都将反映到web和native包。您还可以使用类似concurrent 之类的方法将所有这些组合在一起，以使用单个命令启动观察者。

我与人合着了一个开源库，我们遵循类似的结构，您可以在此处查看。这个项目的不同之处在于我们的 redux 逻辑在一个单独的 repo 中。

为了让 jest 工作，你可以test在你的.babelrc文件中添加一个env 来转换模块。因此，您可以添加两个不同的环境，例如test转换为 commonjs 模块的es环境和保留 ES 模块的环境，以便您的用户可以利用 tree-shaking。示例配置

希望这能给你一个好的起点:)

Answer 2

您可以尝试这样的项目结构：

| package.json
|- node_modules
|- Web
 | package.json
|- SDK
 | package.json
|- Mobile
 | package.json
|- Server
 | package.json

然后您可以在根文件夹中安装所有内容并设置 NODE_PATH 环境变量：

export NODE_PATH='yourdir'/node_modules