如何在 Monorepo 中的 VueJS 项目之间共享组件

Posted 2023-02-22

【中文标题】如何在 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 项目中更改项目共享文件后更新它们。这不是最好的解决方案，但它简单、有效，并且在开发过程中不需要太多努力。