在使用 yarn 工作区和 lerna 为 vue 和 nuxt 设置前端 monorepo 时需要帮助答案

【问题标题】：Need help in setting up a frontend monorepo for vue and nuxt using yarn workspaces and lerna在使用 yarn 工作区和 lerna 为 vue 和 nuxt 设置前端 monorepo 时需要帮助
【发布时间】：2020-09-07 21:08:38
【问题描述】：

我正在尝试使用 yarn 工作区和 lerna 为前端项目设置 monorepo。里面的所有应用包都会有一个共享的组件库。

项目结构如下所示：

root
├── lerna.json
├── package.json
└── packages
   ├── ui-library
   │   ├── src/main.js
   │   ├── dist/library.common.js  
   │   └── package.json
   └── app

当我在 app 中导入 ui-library 时，它给了我各种 lint 错误。

包/ui-library

是@vue/cli创建的常规vue项目。

vue create ui-library
从src/main.js公开自动生成的组件src/App.vue

export { default as App } from './App'
我添加了一个脚本以将项目构建为library

vue-cli-service build --target lib --name library src/main.js
构建脚本会生成 dist/library.common.js 以及其他内容。

在ui-library/package.json，

{
  "name": "@<org>/ui-library",
  "version": "0.0.1-alpha",
  "private": true,
  "main": "./dist/library.common.js",
  "scripts": {
    "build": "vue-cli-service build --target lib --name library src/main.js",
  },
  .
  .
  .
}

包/应用程序

这是npx create-nuxt-app app创建的nuxt项目。
我已经像这样安装了本地 ui-library 包

yarn workspace app add @<org>/ui-library@0.0.1-alpha

成功完成。

我这里除了像这样在pages/index.vue 中导入App 组件外什么都没做

<template>
  <app />
</template>

<script>
import { App } from '@<org>/ui-library'

export default {
  components: {
    App
  }
}
</script>

但由于 lint 错误，应用无法运行。

$ yarn workspace app dev
.
.
app: path\to\packages\ui-library\dist\library.common.js
app:    88:10  error  Unexpected newline between function and ( of function call
                                  no-unexpected-multiline
app:    97:42  error  '_unused_webpack_default_export' is assigned a value but never used
                                  no-unused-vars
app:   102:17  error  'module' is defined but never used
                                  no-unused-vars
.
.
app:    97:42  error  '_unused_webpack_default_export' is assigned a value but never used
                                  no-unused-vars
app:   102:17  error  'module' is defined but never used
                                  no-unused-vars'HelloWorldvue_type_style_index_0_id_b9167eee_scoped_true_lang_css_' is assigned a value but never used  no-unused-vars
app:   449:5   error  'Appvue_type_style_index_0_lang_css_' is assigned a value but never used                                 no-unused-vars
app: ✖ 17 problems (17 errors, 0 warnings)
app:   1 error and 0 warnings potentially fixable with the `--fix` option.

忽略这些 lint 错误的方法是什么，或者我的方法不正确？任何帮助都感激不尽。提前致谢。

【问题讨论】：

如果是外部库，您可以使用 .eslintignore 忽略文件：eslint.org/docs/user-guide/…
你弄明白了吗？我目前正在处理同样的问题。
我目前处于需要决定是否应该采用 Monorepo 方法的情况。如果您能分享您的建议，那就太好了。
视情况而定，最初我在这种方法中遇到了一些障碍，因为当时可能没有太多采用，或者我找不到好的参考资料，但现在它已成为一种事实上的方法对我来说，我们需要一个微前端架构。模块联合实际上是最重要的糖。
@mostafa 现在不再是共享组件库，而是将应用程序划分为模块（读取 DDD）。每个模块都由开发人员或团队负责，任何需要共享的内容都使用模块联合来完成。

标签： vue.js vuejs2 nuxt.js eslint yarn-workspaces

【解决方案1】：

现在不再是共享组件库，而是将应用程序划分为模块（读取 DDD）。每个模块都由开发人员或团队负责，任何需要共享的内容都使用模块联合来完成。

【讨论】：