Ionic 用离子和React(和电容器)创建monorepo

vuktfyat  于 2022-12-08  发布在  Ionic
关注(0)|答案(1)|浏览(300)

I understood that Ionic cannot handle 'yarn workspace' which build the project with react-app-rewiredhttps://github.com/ionic-team/ionic-cli/issues/4430
As suggested in this post, I configure my monorepo with the multi-app option( https://ionicframework.com/docs/cli/configuration#multi-app-projects)
To valide the project structure, I firstly tried to share a simple constants.

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

but when I launch ionic serve --project=app
Have got this error :
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.
Project structure :

ionic.config.json

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

How to manage to share files and components ?
Thank you

9w11ddsr

9w11ddsr1#

Ok, after several day. I have an answer to build monorepo with Ionic & Capacitor !
1 - Build your monorepo with Yarn workspace this tutorial is simple and clear : https://jibin.tech/monorepo-with-create-react-app/ Then you will use react-app-rewired and not 'react-scriptsanymore 2 - Then do not useionic servethat usereact-scripts`

react-app-rewired start

3 - and Capacitor ! The command ionic cap run also use react-scripts then you have to find an alternative
The answer is here https://capacitorjs.com/docs/guides/live-reload : Do not use the 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 },
Bonus : I created a script to automatically update capacitor.config.json https://gist.github.com/damienromito/e6b3930ffde4c7240f109d1de69febb5

相关问题