ホームページ > 記事 > ウェブフロントエンド > Vue3 はどのように glup を使用してコンポーネントライブラリをパッケージ化し、オンデマンド読み込みを実装しますか?

Vue3 はどのように glup を使用してコンポーネントライブラリをパッケージ化し、オンデマンド読み込みを実装しますか?

WBOY転載: 2023-05-12 14:58:141770ブラウズ

glup を使用してコンポーネントライブラリをパッケージ化し、オンデマンドロードを実装する

Vite ライブラリモードを使用してパッケージ化すると、vite はすべてのスタイルファイルを同じファイルにパッケージ化するため、ロードする必要がありますすべてのスタイルファイルをインポートしても、オンデマンドでインポートする効果はありません。したがって、パッケージ化するときに、vite にスタイルファイルをパッケージ化させることはできず、スタイルファイルは gulp を使用してパッケージ化されます。そこでこの記事では、gulpを使ってスタイルファイルをパッケージ化する方法と、スタイルファイルをオンデマンドで読み込む方法を紹介します。

オンデマンドでプラグインを自動的に導入する

現在、多くのコンポーネントライブラリのオンデマンド導入は、プラグインの助けを借りて解決されています。たとえば、ElementPlus unplugin-vue-components と unplugin-auto-import を使用すると、これら 2 つのプラグインは

import { Button } from "easyest";

//相当于
import "easyest/es/src/button/style/index.css";
import "easyest/es/src/button/index.mjs";

を実装してオンデマンドの導入を実現できます。この記事の焦点はここではないため、ここではこれらのプラグインの使用が多すぎます。興味がある場合は、使用方法を直接問い合わせることができます unplugin-vue-components

パッケージファイルの削除

パッケージ化する前に、以前にパッケージ化されたファイルを削除する必要があることは誰もが知っているため、最初に削除関数を作成する必要があります。その前に、コンポーネント内にスクリプト関連のコンテンツを格納する新しいスクリプトフォルダーを作成します。スクリプト配下のビルドフォルダー内のコンテンツが、この記事で紹介するパッケージ化関連のコンテンツです。

コンポーネントライブラリパスを維持するために、script/utils に新しい paths.ts を作成します。最初にインストールすることを忘れないでください。

pnpm add @types/node -D -w

import { resolve } from "path";

//组件库根目录
export const componentPath = resolve(__dirname, "../../");

//pkg根目录
export const pkgPath = resolve(__dirname, "../../../");

パッケージディレクトリの削除関数は、bulid/ の delpath.ts に配置できます。 utils. ここに注意してください。パッケージ化された最も簡単なパッケージが最終的に公開するパッケージであるため、package.json と README.md

import fs from "fs";
import { resolve } from "path";
import { pkgPath } from "./paths";
//保留的文件
const stayFile = ["package.json", "README.md"];

const delPath = async (path: string) => {
  let files: string[] = [];

  if (fs.existsSync(path)) {
    files = fs.readdirSync(path);

    files.forEach(async (file) => {
      let curPath = resolve(path, file);

      if (fs.statSync(curPath).isDirectory()) {
        // recurse
        if (file != "node_modules") await delPath(curPath);
      } else {
        // delete file
        if (!stayFile.includes(file)) {
          fs.unlinkSync(curPath);
        }
      }
    });

    if (path != `${pkgPath}/easyest`) fs.rmdirSync(path);
  }
};
export default delPath;

を保持する必要があります。 gulp を使用する

ts と新しい es6 構文を使用する必要がありますが、これは gulp ではサポートされていないため、gulp がこれらをサポートできるようにするためにいくつかの依存関係をインストールする必要があります。Sucras を使用すると、gulp を実行して最新の構文を使用できますts

pnpm i gulp @types/gulp sucrase -D -w

build/index.ts

import delPath from "../utils/delpath";
import { series, parallel } from "gulp";
import { pkgPath } from "../utils/paths";
//删除easyest

export const removeDist = () => {
  return delPath(`${pkgPath}/easyest`);
};

export default series(async () => removeDist());

#で削除処理を実行ルートディレクトリにスクリプトを追加 easyest/package.json

  "scripts": {
    "build:easyest": "gulp -f packages/components/script/build/index.ts"
  },

##ルートで実行directory

pnpm run build:easyest

easyest の下のファイルが削除されていることがわかります

Vue3 はどのように glup を使用してコンポーネントライブラリをパッケージ化し、オンデマンド読み込みを実装しますか? 削除後、スタイルのパッケージ化を開始できます

gulp パッケージ化スタイル

less によって作成されたスタイルを使用しているため、

gulp-less

をインストールする必要があり、同時にオートコンプリート CSS プレフィックスプラグインもインストールする必要があります。 gulp-autoprefixer とそれに対応する上記のファイル<pre class="brush:bash;">pnpm add gulp-less @types/gulp-less gulp-autoprefixer @types/gulp-autoprefixer -D -w</pre>次に、パッケージ化されたスタイル関数を記述します。ここでは、gulp の

dest

関数と src 関数が使用されます。意味が分からない方は、前回の記事の gulp の紹介を読んでいただければと思います<pre class="brush:js;">//打包样式 export const buildStyle = () => { return src(`${componentPath}/src/**/style/**.less`) .pipe(less()) .pipe(autoprefixer()) .pipe(dest(`${pkgPath}/easyest/lib/src`)) .pipe(dest(`${pkgPath}/easyest/es/src`)); };</pre>コンポーネントのパッケージ化

##最後にコンポーネントをパッケージ化する関数を書きます。コマンドを実行するためのツール関数を記述する必要があります。次に、utils/run.ts に run 関数を導入します。

import { spawn } from "child_process";

export default async (command: string, path: string) => {
  //cmd表示命令，args代表参数，如 rm -rf  rm就是命令，-rf就为参数
  const [cmd, ...args] = command.split(" ");
  return new Promise((resolve, reject) => {
    const app = spawn(cmd, args, {
      cwd: path, //执行命令的路径
      stdio: "inherit", //输出共享给父进程
      shell: true, //mac不需要开启，windows下git base需要开启支持
    });
    //执行完毕关闭并resolve
    app.on("close", resolve);
  });
};

//打包组件
export const buildComponent = async () => {
  run("pnpm run build", componentPath);
};

パッケージスタイルとパッケージコンポーネントは並列できるため、最後の

build/index.ts

は

import delPath from "../utils/delpath";
import { series, parallel, src, dest } from "gulp";
import { pkgPath, componentPath } from "../utils/paths";
import less from "gulp-less";
import autoprefixer from "gulp-autoprefixer";
import run from "../utils/run";
//删除dist

export const removeDist = () => {
  return delPath(`${pkgPath}/easyest`);
};

//打包样式
export const buildStyle = () => {
  return src(`${componentPath}/src/**/style/**.less`)
    .pipe(less())
    .pipe(autoprefixer())
    .pipe(dest(`${pkgPath}/easyest/lib/src`))
    .pipe(dest(`${pkgPath}/easyest/es/src`));
};

//打包组件
export const buildComponent = async () => {
  run("pnpm run build", componentPath);
};
export default series(
  async () => removeDist(),
  parallel(
    async () => buildStyle(),
    async () => buildComponent()
  )
);

最後の vite パッケージは、less ファイル、components/vite を無視します。config.ts

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import dts from "vite-plugin-dts";
import DefineOptions from "unplugin-vue-define-options/vite";
export default defineConfig({
  build: {
    //打包文件目录
    outDir: "es",
    //压缩
    //minify: false,
    rollupOptions: {
      //忽略打包vue和.less文件
      external: ["vue", /\.less/],
      ...
  }

});

パッケージ化の効果をよりよく確認するには、次のようにします。単純な Icon コンポーネントを作成できます。ディレクトリは次のとおりです。

最終ルートディレクトリ Vue3 はどのように glup を使用してコンポーネントライブラリをパッケージ化し、オンデマンド読み込みを実装しますか? pnpm run build

を実行して、パッケージ化を完了します

#vite のパッケージ化では、less ファイルのパッケージ化が無視されるため、パッケージ化されたファイルは .less ファイルに遭遇します。インポートは自動的にスキップされるため、インポートコードは変更されていません。