Vue3コンポーネントライブラリを0から構築する(2)：Monorepoプロジェクト構築

この記事は、Vue3 コンポーネントライブラリを 0 から構築することに関する一連の記事の 2 番目です。この記事では、pnpm を使用して単純な Monorepo プロジェクトを構築し、パッケージの関連付けとテストを完了する方法を説明します。

モノレポとは

実際、これは非常に単純です。つまり、コードベースには多くのプロジェクトが含まれており、これらのプロジェクトは関連していますが、論理的には独立しており、別の人やチームが保守できます。

pnpmを使用する理由

pnpm は、特に Monorepo プロジェクトの場合、パッケージ管理に非常に便利です。なぜなら、開発しようとしているコンポーネントライブラリには複数のパッケージ (パッケージ) が存在する可能性があり、これらのパッケージはローカルでテストする必要があり、たまたま pnpm がそれを自然にサポートしているからです。実際、yarn や lerna などの他のパッケージ管理ツールでも実行できますが、比較的面倒です。そして、pnpm は現在非常に成熟しており、Vant や ElementUI などのスターコンポーネントライブラリが 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 initpackage と b パッケージがある場合、packages の下に a と b を作成し (ここでは pnpm のローカル参照をテストするために使用されます)、それぞれ a ディレクトリと b ディレクトリで初期化を実行します。ここでは、パッケージ名を変更する必要があります。ここで名前を変更します。
Cheng @easyest/a は、パッケージが easyest 組織に属していることを示します。したがって、公開する前に npm にログインして新しい組織を作成することを忘れないでください (たとえば、最も簡単です)。例えばこの時のaの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"
}

ここで、パッケージはツールキットを表し、package.json の主な属性はパッケージのエントリ (つまり、index.js) です。

そこで、ディレクトリに新しいindex.jsを作成します。

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

次に、参照用に b パッケージの下に新しいindex.jsを作成します。

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

ここに画像の説明を挿入
a パッケージを使用したので、最初に a をインストールして、 B ディレクトリに実行する必要があります。2pnpm add @easyest/aつのパッケージを関連付けていないため、明らかにこれによりエラーが発生します。関連付け方法は実際には非常に簡単です。
ルートディレクトリ内の新しい pnpm ワークスペースファイル pnpm-workspace.yaml はパッケージを関連付けることができます

packages:
    - 'packages/**'

これは、パッケージディレクトリ内のすべてのパッケージが関連付けられてから実行されることを意味します。pnpm add @easyest/a
ここに画像の説明を挿入
ここでは import es6 構文を使用しているため、 A と B にpackage.jsonフィールドを追加する必要"type": "module"
があることに注意してください。a は b のノードモジュールに直接表示されることがわかります。ディレクトリソフトリンク。同時に、 b の package.json にはより多くの依存関係フィールドがあり"@easyest/a": "workspace:^1.0.0"、ローカルパッケージに関連付けられていることを意味します@easyest/a。
ここに画像の説明を挿入
このとき、 b ディレクトリで実行します。

node index.js

ここに画像の説明を挿入
この時点で、ローカルパッケージの関連付けが完了しました。今後、パッケージをテストするのがより便利になります。