[Yuanchuang Essay Competition] Vue3 エンタープライズレベルのエレガントな実践 - コンポーネントライブラリフレームワーク - 6 サンプル環境の構築

コンポーネントの作成、コンポーネントライブラリエントリの作成、コンポーネントライブラリスタイルアーキテクチャ、コンポーネントライブラリのパブリックパッケージなど、コンポーネントライブラリの開発環境のセットアップに多くのスペースが費やされています。多くの作業を行った結果、サンプルコンポーネント foo は実行できなくなりました。まだプレビューされていないため、この記事ではサンプル開発環境とパッケージングビルドを構築し、サンプルでコンポーネントライブラリを使用します。

1 サンプル開発環境をセットアップする

1.1 サンプルプロジェクトの作成

例は本質的に vite3 + vue3 プロジェクトです。vite を通じて作成することも、Yaya によって作成された yyg-cli を使用してファミリーバケットプロジェクトを作成することも、手動でビルドすることもできます。その後、プログラマーの Elegant Brother は、サンプルを使用して完全なエンタープライズレベルの中間およびバックエンド管理プロジェクトを実装し、それを使用してコンポーネントライブラリのコンポーネント開発を推進します。

わかりやすくするために、ここでは vite を使用してサンプルプロジェクトを作成します。コマンドラインからサンプルディレクトリを入力し、以下を実行します。

pnpm create vite

このコマンドを入力した後、しばらく待つと、プロジェクト名の入力を求められます。サンプルディレクトリはすでに作成しているので、ここにドット (.) を入力します。
フレームワークはVueを選択します。
バリアントはTypeScriptを選択します。

1.2 package.jsonを変更する

プロジェクトの生成後、急いで依存関係をインストールしないでください。一部の依存関係はすでにワークスペースルートにインストールされているため、このサブモジュールに繰り返しインストールする必要はありません。

package.jsonのname、dependency、devDependencyを変更し、変更内容は以下の通りです。

{
    
    
  "name": "@yyg-demo-ui/example",
  ...
  "dependencies": {
    
    
  },
  "devDependencies": {
    
    
    "@vitejs/plugin-vue": "^3.2.0",
    "typescript": "^4.6.4"
  }
}

1.3 vite設定ファイルを変更する

自動的に生成されたvite.config.tsファイルは vue プラグインのみを構成します。TSX プラグイン、ESLint プラグイン、パスエイリアスなどの他の構成を構成する必要があります。

import {
    
     defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import eslint from 'vite-plugin-eslint'
import vueJsx from '@vitejs/plugin-vue-jsx'

export default defineConfig({
    
    
  plugins: [
    vue(),
    vueJsx(),
    eslint()
  ],
  resolve: {
    
    
    alias: {
    
    
      '@': path.resolve(__dirname, 'src')
    }
  },
  server: {
    
    
    port: 3000,
    cors: true,
    proxy: {
    
    }
  },
  build: {
    
    
    outDir: path.resolve(__dirname, '../dist')
  }
})

1.4 複数環境のサポート

このステップは必要ありません。後続のプロジェクト開発の準備をするためだけです。マルチ環境のサポートについては、以前の記事で詳しく説明されています。以前の記事を参照してください。ここでは簡単な操作だけを説明します。

exampleディレクトリの下にenvディレクトリを作成し、このディレクトリに 4 つのファイルを作成します。

example/env/.env：

VITE_BASE_API=/api
VITE_APP_NAME='demo app'

example/env/.env.dev：

VITE_BASE_API=/dev-api
NODE_ENV=production

example/env/.env.uat：

VITE_BASE_API=/uat-api

example/env/.env.prod：

VITE_BASE_API=/prod-api

vite.config.tsで環境ファイルのディレクトリを指定します。

export default defineConfig({
    
    
  ...
  envDir: path.resolve(__dirname, 'env'),
	...
})

タイプヒント用にsrcにenv.d.tsファイルを作成します。

/// <reference types="vite/client" />

interface ImportMetaEnv {
    
    
  readonly VITE_BASE_API: string;
  readonly VITE_APP_NAME: string;
}

// eslint-disable-next-line no-unused-vars
interface ImportMeta {
    
    
  readonly env: ImportMetaEnv
}

package.json のスクリプトを変更します。

{
    
    
  ...
  "scripts": {
    
    
    "dev:dev": "vite --mode dev",
    "dev:uat": "vite --mode uat",
    "dev:prod": "vite --mode prod",
    "build:dev": "vue-tsc --noEmit && vite build --mode dev",
    "build:uat": "vue-tsc --noEmit && vite build --mode uat",
    "build:prod": "vue-tsc --noEmit && vite build --mode prod",
    "preview": "vite preview"
  },
  ...
}

main.ts の入力環境変数をテストします。

const env = import.meta.env
console.log(env)

1.5 テスト起動サービス

を実行しpnpm run dev:dev、サービスが正常に起動できるかテストした後、ブラウザでlocalhost:3000にアクセスしてインターフェースが正常か、環境変数が正常に出力されるかをテストします。

2 foo コンポーネントをテストする

サンプルが正常に実行できたということは、サンプルが正常に初期化されたことを意味するため、以前に開発した foo コンポーネントをテストする必要があります。

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

カスタムコンポーネントライブラリはelement-plusに依存しているため、最初にexample でelement-plusをインストールする必要があります。

pnpm install element-plus

次に、ローカルコンポーネントライブラリ@yyg-demo-ui/yyg-demo-uiをインストールします。

pnpm install @yyg-demo-ui/yyg-demo-ui

このとき、例のpackage.jsonの依存関係は以下のとおりです。

"dependencies": {
    
    
  "@yyg-demo-ui/yyg-demo-ui": "workspace:^1.0.0",
  "element-plus": "^2.2.21"
},

2.2 コンポーネントライブラリの導入

main.tsに element-plus とカスタムコンポーネントライブラリをそれぞれ導入します。

...
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import YygDemoUi from '@yyg-demo-ui/yyg-demo-ui'

...

const app = createApp(App)
app.use(ElementPlus)
app.use(YygDemoUi)
app.mount('#app')

2.3 コンポーネントの使用

プロジェクトが作成されると、多くのスタイルがsrc/style.cssに自動的に生成されます。内部のコンテンツをすべて削除して、空のstyle.cssファイルを残すことができます。

最後に、App.vue で foo コンポーネントをテストするだけで済みます。App.vue を次のように変更します。

<template>
  <div class="site">
    <h1>组件库测试站点 yyg-demo-ui</h1>
    <p>测试站点主要用于开发过程中测试组件，即在开发过程中由业务驱动组件开发。</p>
    <yyg-foo :msg="msg"></yyg-foo>
  </div>
</template>
<script setup lang="ts">
import {
      
       ref } from 'vue'

const msg = ref('hello world')
</script>

<style scoped lang="scss">
.site {
      
      
  padding: 20px;
}
</style>

2.4 実行して効果を確認する

pnpm run dev:dev を再度実行して、効果を確認します。

foo コンポーネントのスタイル、関数、testLog 関数はすべて正常に動作し、サンプルとコンポーネントライブラリの開発環境が完成しました。

3 パッケージのビルド例

build:dev、build:uat、およびbuild:prodコマンドが前のスクリプトに追加され、それぞれ dev、uat、および prod の 3 つの環境に対応します。パッケージ化と構築を説明するために、dev 環境を例に挙げてみましょう。例。

コマンドラインからサンプルディレクトリを入力し、パッケージ化、ビルド、プレビューを順番に実行します。

pnpm run build:devを実行してパッケージ化します。パッケージ化とビルドが成功すると、プロジェクト全体のルートディレクトリにdistディレクトリが生成されます(このディレクトリはvite.config.ts のbuild.outDirで構成されます)。
pnpm runreviewを実行してパッケージ化されたファイルをプレビューし、コンソールのポート出力にアクセスすると、実行中の効果は上記の効果と一致します。

この時点で、サンプルの開発と構築は完了し、サンプル内でコンポーネントライブラリのコンポーネントを使用できるようになります。以下に、コンポーネントライブラリドキュメントの開発と構築について説明します。

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