18

我想开始一个新的应用程序，它将同时具有 web 和 reactnative 界面。

我决定将所有业务 - 非环境相关 - 代码移动到第三个包 - aka sdk- 我可以在 react 和 react native 之间共享。

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

  1. 网络——用 cra 创建
  2. sdk——主要是redux + redux saga + react containers + Hoc's
  3. 移动 - 反应原生

  4. 服务器 - nodejs express api。

    • 所有网络、移动和服务器都将依赖于 Sdk 模块。
    • sdk 模块将依赖于服务器模块 - 主要用于引入模拟和数据接口。

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

很可能我很想

  • 使用纱线工作空间将所有节点模块提升到一个文件夹中，以避免在每个项目中重新安装包
  • 我将同时在所有 4 个项目中工作，所以我需要 hotreload 来了解这一点。

**我面临的挑战**

  1. Cra 不会在 src 文件夹之外转换代码，因此尽管 web 项目确实刷新了，但我在 sdk 上进行了更改。它无法理解 es6 代码。
  2. Jest 也不理解来自 node_modules 的 es6

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

4

2 回答 2

6

纱线工作区听起来像是您正在考虑的项目结构的好方法。

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

/packages
  - web
  - sdk
  - native

现在你可以使用babel来观察你使用的每个包的代码更改，babel -w并且 yarn 工作区将负责将它们链接在一起。

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

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

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

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

于 2018-07-30T05:59:24.367 回答
-1

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

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

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

export NODE_PATH='yourdir'/node_modules
于 2018-07-25T07:03:03.747 回答