使用 ionic 和 react（和电容器）创建一个 monorepo

Question

我了解到 Ionic 无法处理 'yarn workspace'，它使用 react-app-rewired https://github.com/ionic-team/ionic-cli/issues/4430

构建项目

按照此 post 中的建议，我使用多应用程序选项配置我的 monorepo(https://ionicframework.com/docs/cli/configuration#multi-app-projects)

为了验证项目结构，我首先尝试共享一个简单的常量。

import * as ROLES from '../../../../lib/constants'

但是当我启动时 ionic serve --project=app

遇到这个错误：

Module not found: You attempted to import ../../../../lib/constants which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.

项目结构：

ionic.config.json

{
  "defaultProject": "myProject",
  "projects": {
    "app": {
      "name": "My First Ionic App",
      "type": "react",
      "root": "packages/app",
      "integrations": {
        "capacitor": {}
      },
    }
  }
}

如何管理共享文件和组件？

谢谢

Answer 1

好的，几天后。我有使用 Ionic & Capacitor 构建 monorepo 的答案！

1 - 使用 Yarn 工作区构建你的 monorepo 本教程简单明了：https://jibin.tech/monorepo-with-create-react-app/ 然后你将使用 react-app-rewired 而不是 'react-scripts` 了

2 - 然后不要使用 ionic serve，即使用 react-scripts

react-app-rewired start

3 - 和电容器！命令 ionic cap run 也使用 react-scripts 然后你必须找到一个替代

答案在这里https://capacitorjs.com/docs/guides/live-reload：不要使用 Ionic CLI

Capacitor supports CLIs with live reload capability.

Within capacitor.config.json, create a server entry then configure the url field using the local web server’s IP address and port:

"server": { "url": "http://192.168.1.68:8100", "cleartext": true },

奖励：我创建了一个脚本来自动更新 capacitor.config.json https://gist.github.com/damienromito/e6b3930ffde4c7240f109d1de69febb5

使用 ionic 和 react（和电容器）创建一个 monorepo

Create a monorepo with ionic and react (and capacitor)

reactjs

ionic-framework

capacitor

monorepo