Vue3에서 Monorepo 프로젝트 구성 요소 라이브러리를 빌드하는 방법

모노레포란

사실 매우 간단합니다. 많은 프로젝트가 포함되어 있지만 이러한 프로젝트는 논리적으로 독립적이며 다른 사람이나 팀에 의해 유지 관리될 수 있습니다. pnpm

Monorepo 프로젝트의 경우 패키지 관리에 pnpm을 사용하면 매우 편리합니다. 우리가 개발하려는 구성 요소 라이브러리에 대한 여러 패키지가 있을 수 있고 이러한 패키지는 로컬에서 서로 결합하여 테스트해야 하므로 pnpm은 이를 자연스럽게 지원합니다. 실제로 얀, 레르나 등 다른 패키지 관리 도구로도 할 수 있지만 상대적으로 번거롭다. pnpm은 이제 매우 성숙해졌습니다. Vant 및 ElementUI와 같은 Star 구성 요소 라이브러리가 pnpm을 사용하므로 이 프로젝트에서도 pnpm을 패키지 관리 도구로 사용합니다.

pnpm 사용법

설치

npm install pnpm -g

프로젝트 초기화

프로젝트 루트 디렉터리에서 pnpm init를 실행하면 package.json 파일이 자동으로 생성됩니다

{
  "name": "easyest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

패키지 관리pnpm init,会自动生成package.json文件

{
  "name": "@easyest/a",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

包管理

我们新建一个 packages 文件夹用于后续来存放我们的各种包。假如我们有了 a 包和 b 包,在 packages 下新建 a 和 b(这里用于测试 pnpm 的本地引用),然后分别在 a 和 b 目录下执行pnpm init初始化

这里需要改一下包名，我这里将 name 改成@easyest/a 表示这个 a 包是属于 easyest 这个组织下的。在发布之前，请确保已经登录到 npm，并创建一个组织，例如 easyest。比如此时 a 的 package.json

export default () => {
  console.log("我是@easyest/a包");
};

这里我们的 a 包代表工具包,而 package.json 的 main 属性就是包的入口即 index.js。

所以在 a 目录下新建 index.js

import sayHello from "@easyest/a";
sayHello();

然后在 b 包下新建 index.js 进行引用

packages:
    - 'packages/**'

p>我们用到了 a 包,所以需要先安装 a,在 B 目录下执行pnpm add @easyest/a,显然这样会报错的,因为我们还没有将两个包进行关联,那么如何进行关联呢,其实很简单

在根目录新建 pnpm 的工作区文件 pnpm-workspace.yaml 就可以将包进行关联

node index.js

这样就表示 packages 目录下的所有包都被关联了,然后再执行pnpm add @easyest/a

注意这里我们使用了 import es6 语法,所以我们要在 A 和 B 的package.json中新增字段"type": "module"

我们会发现直接在 b 目录的 node_modules 出现了 a 的软链接。同时,b的package.json的依赖字段多了"@easyest/a": "workspace:^1.0.0",这就表示已经关联到本地的@easyest/a

다양한 패키지를 나중에 저장할 수 있도록 새 패키지 폴더를 만듭니다. 패키지 a와 패키지 b가 있는 경우 패키지 아래에 a와 b를 생성하고(여기서는 pnpm의 로컬 참조를 테스트하는 데 사용됨) 여기에서 각각 a와 b 디렉터리에서 pnpm init 초기화를 실행합니다

패키지 이름을 변경해야 합니다. 패키지가 가장 쉬운 조직에 속한다는 것을 나타내기 위해 여기에서 이름을 @easyest/a로 변경했습니다. 게시하기 전에 npm에 로그인했는지 확인하고 easyest와 같은 조직을 만드세요. 예를 들어, 이때 a의 package.json은

rrreee

여기서 a 패키지는 도구 패키지를 나타내며 package.json의 주요 속성은 패키지의 입구인 index.js입니다.

그러면 a 디렉토리에 새로운 index.js를 생성하세요rrreee

그런 다음 참고용으로 b 패키지에 새로운 index.js를 생성하세요

rrreee

🎜🎜p> 우리는 a 패키지를 사용하므로 먼저 패키지를 설치하고 를 실행해야 합니다. pnpm은 B 디렉터리 에 @easyest/a를 추가합니다. 두 패키지를 연결하지 않았기 때문에 분명히 오류가 보고될 것입니다. 따라서 연결하는 방법은 실제로 매우 간단합니다🎜🎜새 pnpm 작업 공간 파일 만들기 루트 디렉터리에 있는 pnpm-workspace.yaml을 사용하면 패키지가 연결됩니다🎜rrreee🎜이는 패키지 디렉터리의 모든 패키지가 연결되고 pnpm add @easyest/a🎜🎜🎜🎜 import es6을 사용한다는 점에 유의하세요. 여기에서는 구문이 있으므로 "type": "module" is added in code>package.json🎜🎜을 사용해야 합니다. a의 소프트 링크가 직접 나타나는 것을 알 수 있습니다. b 디렉토리의 node_modules에 있습니다. 동시에 b의 package.json에는 더 많은 종속성 필드 "@easyest/a": "workspace:^1.0.0"가 있습니다. 이는 로컬 @easyest와 연결되었음을 의미합니다. /a Packaged🎜🎜🎜🎜🎜이제 b 디렉터리에서 실행합니다🎜rrreee🎜🎜🎜🎜이제 로컬 패키지의 연결이 완료되었으므로 패키지 테스트가 더 편리해집니다. 앞으로도🎜

위 내용은 Vue3에서 Monorepo 프로젝트 구성 요소 라이브러리를 빌드하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!