[英]Create a monorepo with ionic and react (and capacitor)
I understood that Ionic cannot handle 'yarn workspace' which build the project with react-app-rewired
https://github.com/ionic-team/ionic-cli/issues/4430我知道 Ionic 无法处理使用
react-app-rewired
rewired https://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 )正如这篇文章中所建议的,我使用多应用程序选项( https://ionicframework.com/docs/cli/configuration#multi-app-projects )配置我的 monorepo
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
但是当我启动
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.
未找到模块:您试图导入项目 src/ 目录之外的../../../../lib/constants。 Relative imports outside of src/ are not supported.
不支持 src/ 之外的相对导入。
Project structure:项目结构:
ionic.config.json 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谢谢
Ok, after several day.好的,几天后。 I have an answer to build monorepo with Ionic & Capacitor !
我有一个使用 Ionic & Capacitor 构建 monorepo 的答案!
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-scripts` anymore 1 - 使用 Yarn 工作区构建你的 monorepo 本教程简单明了: https://jibin.tech/monorepo-with-create-react-app/然后你将使用
react-app-rewired
rewired 而不是 'react-scripts`
2 - Then do not use ionic serve
that use react-scripts
2 - 然后不要使用使用
react-scripts
ionic serve
react-app-rewired start
3 - and Capacitor ! 3 - 和电容器! The command
ionic cap run
also use react-scripts
then you have to find an alternative命令
ionic cap run
也使用react-scripts
然后你必须找到一个替代方案
The answer is here https://capacitorjs.com/docs/guides/live-reload : Do not use the Ionic CLI答案在这里https://capacitorjs.com/docs/guides/live-reload :不要使用 Ionic CLI
Capacitor supports CLIs with live reload capability.
Capacitor 支持具有实时重新加载功能的 CLI。
Within capacitor.config.json, create a server entry then configure the url field using the local web server's IP address and port:
在capacitor.config.json中,创建一个服务器条目,然后使用本地web服务器的ZA1621A3079E8A9AED和端口配置url字段
"server": { "url": "http://192.168.1.68:8100", "cleartext": true },
“服务器”:{“网址”:“http://192.168.1.68:8100”,“明文”:真},
Bonus: I created a script to automatically update capacitor.config.json https://gist.github.com/damienromito/e6b3930ffde4c7240f109d1de69febb5奖励:我创建了一个脚本来自动更新电容器。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.