[Yuanchuang Essay Competition] Vue3 エンタープライズレベルの優雅さの実践 - コンポーネントライブラリフレームワーク - 5 コンポーネントライブラリの一般的なツールキット

実用的な vite + vue3 コンポーネントライブラリスキャフォールディングツールを共有して、開発効率を向上させる
 すぐに使える yyg-cli スキャフォールディングを使用する: vue3 コンポーネントライブラリと vue3 ファミリーバケットプロジェクトを迅速に作成する
 Vue3 エンタープライズレベルのエレガントな実践 - コンポーネントライブラリフレームワーク - 1 pnpm monorepo を構築するVue3
エンタープライズレベルの Elegance の実践 - コンポーネントライブラリフレームワーク - 2 ワークスペースルートの初期化
 Vue3 エンタープライズレベルの Elegance の実践 - コンポーネントライブラリフレームワーク - 3 コンポーネントライブラリ開発環境の構築
 Vue3 エンタープライズレベルの Elegance の実践 - コンポーネントライブラリフレームワーク - 4コンポーネントライブラリ

この記事では、コンポーネントライブラリ開発環境の構築を続けます。最初の 2 つの記事では、コンポーネントライブラリ内のコンポーネントプロジェクトの初期化とコンポーネントライブラリの CSS アーキテクチャについて紹介しました。この記事では、一般的なツールライブラリの構築について紹介します。コンポーネントの開発プロセス中に、いくつかの共通ツール関数が呼び出される場合があり、これらのツール関数は独立した npm パッケージに抽出できます。

1 ツールキットの作成

1.1 初期化ツールキット

これまでのところ、packagesディレクトリには 3 つのパッケージ ( fooサンプルコンポーネント、scssスタイル、yyg-demo-uiコンポーネントライブラリアグリゲーション)があり、ここで 4 つ目のパッケージ ( utils )を作成します。

コマンドラインで utils ディレクトリを入力し、pnpm を使用して初期化します。

pnpm init

自動生成されたpackage.jsonファイルのnameとmainを変更します。内容は次のとおりです。

{
    
    
  "name": "@yyg-demo-ui/utils",
  "version": "1.0.0",
  "description": "通用工具函数",
  "main": "index.ts",
  "scripts": {
    
    
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

ツールキットも TypeScript で記述されているため、tsconfig.jsonファイルもutilsの下に提供されます。

{
    
    
  "compilerOptions": {
    
    
    "target": "es2015",
    "lib": [
      "es2015"
    ],
    "module": "commonjs",
    "rootDir": "./",
    "allowJs": true,
    "isolatedModules": false,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  }
}

1.2 最初のツール関数を作成する

要件の説明: コンポーネント間の通信は厳格な要件であり、コンポーネントのレベルが多い場合は、通信にグローバルバスを使用できます。通常、Vue 2.x では EventBus がグローバルバスとして使用されますが、Vue 3.x ではmittを使用できます。mittはサイズが小さく、すべてのイベントの監視とバッチ削除をサポートし、Vue インスタンスに依存せず、フレームワーク間で使用できます。最初のツール機能は、単純にミットをカプセル化し、ミットオブジェクトをエクスポートすることです。

まず、utilsパッケージの下にmit依存関係をインストールします。

pnpm install [email protected]

注意深い学生は、Mit を導入するときに Yaya 兄弟がバージョン番号 1.1.3 を指定したことに気づくでしょう。これは、最新バージョン 3.0.0 を使用すると、型宣言がないため、Yaya 兄弟は常に型エラーを表示するか、型宣言ファイルが見つからないためです。ファイルが空の場合は、単にバージョン 1.1.3 にダウングレードされます。

utilsディレクトリ内にソースコードディレクトリsrcを作成し、src内にEmitter.tsファイルを作成します。

utils/src/emitter.ts：

import mitt from 'mitt'
const Mitt = mitt
export const emitter: mitt.Emitter = new Mitt()

export default emitter

上記のコードの 2 行目は、本質的にnew mitt()であるため、冗長に見えますが、これは eslint のルールを満たすために行われます。

コンストラクター名は小文字で始めてはなりません。

1.3 2 番目のツール関数を作成する

上記のエミッタオブジェクトは後続のコンポーネント開発で使用されますが、foo では使用されないため、テスト用のツール関数を作成しましょう。

test-log.tsファイルをディレクトリにutils/src/作成します。

export const testLog = (str: string) => {
    
    
  console.log('test log: ', str)
}

1.4 エントリーファイル

以前のpackage.json は、 mainをindex.tsとして指定し、utilsディレクトリにindex.tsファイルを作成し、すべてのツール関数などをインポートおよびエクスポートします。

export {
    
     emitter } from './src/emitter'
export {
    
     testLog } from './src/test-log'

要約すると、コンポーネントライブラリユニバーサルツールキットのディレクトリ構造は次のとおりです。

packages/
  |- utils/
    |- src/
        |- emitter.ts
        |- test-log.ts
    |- index.ts
    |- tsconfig.json
    |- package.json

2 コンポーネントでのツールキットの使用

2.1 依存関係をインストールする

fooサンプルコンポーネントは以前に開発されています。このコンポーネントがツールキットを使用したい場合は、最初に依存関係をインストールする必要があります。コマンドラインにfooディレクトリを入力します。

pnpm install @yyg-demo-ui/utils

実行後、foo の package.json に依存関係の行がさらに 1 行追加されます。

"dependencies": {
  "@yyg-demo-ui/utils": "workspace:^1.0.0"
}

2.2 ツールの使用

utilsパッケージはmainをindex.tsとして指定しており、すべてのツールはindex.tsにインポートおよびエクスポートされるため、使用する場合はutilsパッケージを導入するだけで済みます。

たとえば、上で作成したtestLog関数を使用するには、次のようにコードに関数を導入するだけです。

import {
    
     testLog } from '@yyg-demo-ui/utils'

このメソッドは、セットアップのボタンクリックイベントで呼び出されます。

const onBtnClick = () => {
    
    
  console.log('点击按钮测试', props.msg)
  testLog(props.msg)
}

JSON スキーマの解析など、開発プロセスの後半で新しいツール関数が追加された場合は、それらをutilsに追加し、 utils/index.tsで均一にインポートおよびエクスポートします。

この記事を読んでいただきありがとうございます。この記事が少しでも役に立ったり、インスピレーションになった場合は、いいね、フォロー、集めて三回連続で応援してください。プログラマーエレガントブラザーは今後もより有益な情報を皆さんに共有していきます。