如何在 Monorepo 中的 VueJS 项目之间共享组件
Posted
技术标签:
【中文标题】如何在 Monorepo 中的 VueJS 项目之间共享组件【英文标题】:How to share components between VueJS projects in a Monorepo 【发布时间】:2018-12-31 18:19:46 【问题描述】:在一个存储库中,我有两个 VueJS 单页应用程序,它们应该共享一些组件、一个插件和其他通用代码。如果对公共代码进行了更改,这些更改应立即在两个应用程序中可见。
我的问题: 我该如何解决这个问题?有没有规范的方法可以做到这一点?
问题
我的简单方法是将代码复制到公共目录并使用../../common/my_component
导入。但这会破坏相对导入以及打字。
将共享内容转换为 npm 模块会破坏更改时的自动更新,不是吗?
更多上下文:
我正在使用 TypeScript 编写应用程序。 npm link 不是选项,因为它必须运行
现在的结构是这样的:
/ Main_Project
|-App1
| |- src
| |- ...
|-App2
| |- src
| |- ...
|-Common
| |- components
| |- plugins
| |- shared_code
【问题讨论】:
您的tsconfig.json
文件在哪里? Main_Project
是单独的还是每个应用单独的?
每个应用程序都是独立的。但它们是相同的。
需要更多信息。为什么它会打破相对进口?我们有一个使用 TypeScript 的单一存储库设置,它可以工作。可以多加些代码sn-ps吗?
@wedi 你做到了吗?喜欢不依赖 npm 存储库而是你自己的 monorepo?
最后我不需要解决方案,因为这两个应用程序已合并为一个。不过,如果您找到解决方案,如果您发布它对您的工作方式,我会很高兴。也许@HarshalPatil 可以帮助您处理您的用例?
【参考方案1】:
我的解决方案是将文件从共享项目复制到应用项目中。
App1/package.json:
"scripts":
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"shared": "copyfiles -u 4 -E ../Common/src/shared/**/*.* ./src/shared/"
,
"devDependencies":
....
"copyfiles": "^2.4.1"
我运行命令npm run shared
以便在Common
项目中更改项目共享文件后更新它们。这不是最好的解决方案,但它简单、有效,并且在开发过程中不需要太多努力。
【讨论】:
以上是关于如何在 Monorepo 中的 VueJS 项目之间共享组件的主要内容,如果未能解决你的问题,请参考以下文章
尝试在 monorepo 项目中配置 Babel - 当前未启用“classProperties”。如何在 monorepo 项目中设置 Babel?
Monorepo 中的 Jest 项目无法在项目中找到配置文件