Vue3 で Monorepo プロジェクト コンポーネント ライブラリを構築する方法

モノリポとは

実際には、非常に単純です。コード ベースに多くのプロジェクトが含まれていることを意味します。これらのプロジェクトは関連していますが、論理的には独立しており、異なる人やチームが作業できます。メンテナンス

pnpm を使用する理由

Monorepo プロジェクトでは、パッケージ管理に pnpm を使用すると非常に便利です。開発しようとしているコンポーネント ライブラリには複数のパッケージが存在する可能性があり、これらのパッケージはローカルで相互に組み合わせてテストする必要があるため、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"
}

パッケージ管理

さまざまなパッケージを後で保存するために、新しいパッケージ フォルダーを作成します。パッケージ a とパッケージ b がある場合、パッケージ (ここでは pnpm のローカル参照をテストするために使用) の下に a と b を作成し、それぞれ a ディレクトリと b ディレクトリで pnpm initInitialization

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

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

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

pnpm add @easyest/a を実行する必要があります。関連付けられていないため、明らかにこれによりエラーが発生します。 2 つのパッケージ、それではどうすればよいでしょうか? 関連付けは実際には非常に簡単です。

packages:
    - 'packages/**'

pnpm add @easyest/a

"type": "module" の新しいフィールドで、a のソフト リンクが直接表示されることがわかります。 b ディレクトリの node_modules にあります。同時に、b の package.json には、より多くの依存関係フィールド

があります。これは、ローカルの @easyest/ に関連付けられていることを意味します。 aPackage

今回は b ディレクトリで実行します

node index.js

この時点で完了しましたローカルのパッケージ協会、将来的にはパッケージのテストがより便利になるでしょう

以上がVue3 で Monorepo プロジェクト コンポーネント ライブラリを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。