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

# を実行します。 . ##ここでパッケージ名を変更する必要があります。このパッケージが最も簡単な組織に属していることを示すために、ここの名前を @easyest/a に変更しました。公開する前に、npm にログインしていることを確認し、easyest などの組織を作成します。たとえば、この時点の 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"
}

ここで、a パッケージはツール パッケージを表し、package.json の主な属性はパッケージの入り口、つまりindex.js です。

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

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

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

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

p> ;a パッケージを使用するので、最初に a パッケージをインストールし、B ディレクトリで

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

ルート ディレクトリに新しい pnpm ワークスペース ファイル pnpm-workspace.yaml を作成して、パッケージを関連付けます。

packages:
    - 'packages/**'

これこれは、packages ディレクトリ内のすべてのパッケージが関連付けられていることを意味し、

pnpm add @easyest/a

ここでは import es6 構文を使用していることに注意してください。 A と B の間に # を追加する必要があります。 ##package.json

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

"@easyest/a": "workspace:^1.0.0"

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

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

node index.js

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

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