실 워크스페이스 및 lerna를 사용하여 vue 및 nuxt용 프론트 엔드 모노레포를 설정하는 데 도움이 필요합니다.

실 워크스페이스 및 lerna를 사용하여 vue 및 nuxt용 프론트 엔드 모노레포를 설정하는 데 도움이 필요합니다.

실 작업공간과 얼나를 이용한 프런트엔드 프로젝트의 모노레포를 설정하려고 합니다.모든 앱 패키지에 대한 공유 컴포넌트 라이브러리가 있습니다.

프로젝트 구조는 다음과 같습니다.

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

를 Import 할 때ui-library내 안에서app모든 종류의 보풀 오류가 발생합니다.

---

패키지/ui 패키지

1. 에 의해 작성된 일반 vue 프로젝트입니다.@vue/cli.

   vue create ui-library

2. 자동 생성된 컴포넌트를 표시합니다.src/App.vue부터src/main.js

   export { default as App } from './App'

3. 프로젝트를 라이브러리로 빌드하기 위한 스크립트를 추가했습니다.

   vue-cli-service build --target lib --name library src/main.js

4. 빌드 스크립트에 의해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",
  },
  .
  .
  .
}

---

패키지/앱

1. Nuxt 프로젝트입니다.npx create-nuxt-app app.

2. 로컬 UI 라이브러리 패키지를 다음과 같이 설치했습니다.

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

정상적으로 종료됩니다.

여기서 앱 컴포넌트를 Import하는 것 외에는 아무것도 하지 않았습니다.pages/index.vue이것처럼.

<template>
  <app />
</template>

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

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

그러나 보풀 오류로 인해 앱이 실행되지 않습니다.

$ 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.

이러한 보풀 오류를 무시하는 방법 또는 잘못된 접근 방식입니까?어떤 도움이라도 주시면 대단히 감사하겠습니다.잘 부탁드립니다.

공유 컴포넌트 라이브러리 대신 어플리케이션이 모듈(DD 읽기)로 분할됩니다.각 모듈은 개발자 또는 팀의 책임이며 공유가 필요한 것은 모듈 페더레이션을 사용하여 수행합니다.

언급URL : https://stackoverflow.com/questions/63784275/need-help-in-setting-up-a-frontend-monorepo-for-vue-and-nuxt-using-yarn-workspac