如何在 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 项目无法在项目中找到配置文件

如何在具有纱线工作空间的 monorepo 中从 nodejs 项目构建 docker 映像

如何在 monorepo 中维护每个模块的自动更改日志?

如何利用 monorepo 策略管理代码?

Monorepo,大型前端项目管理模式实践