Comment Vue3 utilise-t-il glup pour empaqueter les bibliothèques de composants et implémenter le chargement à la demande ?

Utilisez glut pour empaqueter la bibliothèque de composants et implémenter le chargement à la demande

Lorsque nous utilisons le mode bibliothèque Vite pour l'empaquetage, vite empaquetera tous les fichiers de style dans le même fichier. Dans ce cas, nous devons importer entièrement tous les fichiers de style à chaque fois. .à l'effet introduit sur demande. Ainsi, lors de l'empaquetage, nous ne pouvons pas laisser vite empaqueter les fichiers de style, et les fichiers de style seront empaquetés à l'aide de gulp. Cet article explique donc comment utiliser gulp pour empaqueter des fichiers de style et comment charger des fichiers de style à la demande.

Introduire automatiquement des plug-ins à la demande

De nos jours, l'introduction à la demande de nombreuses bibliothèques de composants est résolue à l'aide de plug-ins. Par exemple, ElementPlus utilise unplugin-vue. -components et unplugin-auto-import, ces deux plug-ins peuvent implémenter ElementPlus是使用unplugin-vue-components和unplugin-auto-import,这两个插件可以实现

import { Button } from "easyest";

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

从而实现按需引入,这里不再过多展开这些插件的使用,因为本篇文章的重点不在这里,感兴趣的可以直接去查询使用方式unplugin-vue-components

删除打包文件

我们都知道,在打包之前是需要将前面打包的文件删除的,所以需要先写一个删除函数。在此之前,我们先在 components 新建一个 script 文件夹用于存放我们的脚本相关内容,script 下的 build 文件夹里的内容则是本篇文章要介绍的打包相关内容。

在 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/utils 中的 delpath.ts,注意这里因为打包后的 easyest 包是我们最终要发布的包,所以我们需要将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"
  },

根目录下执行pnpm run build:easyest就会发现 easyest 下的文件被删除了

删除完之后就可以开始打包样式了

gulp 打包样式

因为我们用的是 less 写的样式,所以需要安装gulp-less,同时在安装一个自动补全 css 前缀插件gulp-autoprefixer以及它们对应的上面文件

pnpm add gulp-less @types/gulp-less gulp-autoprefixer @types/gulp-autoprefixer -D -w

然后写一个打包样式的函数,这里使用到了 gulp 的dest和src函数,不知道什么意思的乐意看上一篇文章 gulp 的介绍

//打包样式
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`));
};

打包组件

最后再写一个打包组件的函数,这里需要写一个执行命令的工具函数,在 utils/run.ts

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);
  });
};

然后引入 run 函数

//打包组件
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 组件,目录如下

最后根目录执行pnpm run build,即可完成打包

由于 vite 打包忽略了 less 文件打包,所以打包后的文件遇到.less 文件的引入会自动跳过,所以引入代码没变

但是我们已经将 less 文件打包成 css 文件了,所以我们需要将代码中的.less换成.css

在 components/vite.config.ts 中的 plugins 中新增

 plugins: [
    vue(),
    DefineOptions(),
    dts({
      entryRoot: "./src",
      outputDir: ["../easyest/es/src", "../easyest/lib/src"],
      //指定使用的tsconfig.json为我们整个项目根目录下,如果不配置,你也可以在components下新建tsconfig.json
      tsConfigFilePath: "../../tsconfig.json",
    }),
    {
      name: "style",
      generateBundle(config, bundle) {
        //这里可以获取打包后的文件目录以及代码code
        const keys = Object.keys(bundle);

        for (const key of keys) {
          const bundler: any = bundle[key as any];
          //rollup内置方法,将所有输出文件code中的.less换成.css,因为我们当时没有打包less文件

          this.emitFile({
            type: "asset",
            fileName: key, //文件名名不变
            source: bundler.code.replace(/\.less/g, ".css"),
          });
        }
      },
    },
  ],

此时执行pnpm run build:easyest,然后再看打包后文件引入

此时.less已经被替换成了.cssrrreee

pour réaliser une importation à la demande. Je ne développerai pas ici l'utilisation de ces plug-ins. car l'objet de cet article n'est pas ici. Intéressé Vous pouvez directement interroger la méthode d'utilisation de unplugin-vue-components🎜🎜Supprimer les fichiers empaquetés🎜🎜Nous savons tous que les fichiers précédemment empaquetés doivent être supprimés avant l'empaquetage, nous devons donc le faire. écrivez d’abord une fonction de suppression. Avant cela, nous créons d'abord un nouveau dossier de script dans les composants pour stocker notre contenu lié au script. Le contenu du dossier build sous script est le contenu lié à l'empaquetage qui sera présenté dans cet article. 🎜🎜Créez un nouveau paths.ts dans script/utils pour conserver le chemin de la bibliothèque de composants. N'oubliez pas de l'installer en premier🎜rrreeerrreee🎜La fonction de suppression du répertoire du package peut être placée dans delpath.ts dans bulid/utils. Le paquet le plus facile à emballer est le nôtre Le paquet final à publier, nous devons donc conserver package.json et README.md🎜rrreee🎜Utilisez gulp🎜🎜Nous devons utiliser ts et la nouvelle syntaxe es6, et gulp ne la prend pas en charge, nous devons donc installer certaines dépendances pour que gulp les prenne en charge. Sucras nous permet d'exécuter gulp pour utiliser la dernière syntaxe et prendre en charge ts🎜rrreee🎜Dans build/index.ts pour. effectuez le processus de suppression🎜rrreee🎜dans le répertoire racine easyest/package.json Ajoutez le script 🎜rrreee🎜Exécutez pnpm run build:easyest dans le répertoire racine et vous constaterez que les fichiers sous easyest ont été supprimé🎜🎜🎜🎜Après la suppression, vous pouvez commencer les styles d'emballage🎜🎜style d'emballage gulp 🎜🎜Parce que nous utilisons le style écrit par less, nous devons installer gulp-less, et en même temps installer un Plug-in de préfixe CSS à saisie semi-automatique gulp-autoprefixer et leur correspondant Le fichier ci-dessus 🎜rrreee🎜 puis écrivez une fonction de style d'empaquetage Le dest et le src<.> les fonctions de gulp sont utilisées ici. Si vous ne savez pas ce que cela signifie, j'aimerais lire l'article précédent gulp Introduction🎜rrreee🎜Composants d'emballage🎜🎜Enfin, écrivez une fonction pour les composants d'emballage. écrivez une fonction d'outil pour exécuter la commande. Dans utils/run.ts🎜rrreee🎜puis introduisez la fonction run🎜rrreee🎜en raison des styles d'empaquetage et des composants d'empaquetage. Elle peut être parallélisée, donc le <code>build/index.ts est 🎜rrreee🎜En fin de compte, lorsque vite est empaqueté, moins le fichier est ignoré, composants/vite.config.ts🎜rrreee🎜Afin de mieux voir l'effet de l'empaquetage, nous pouvons écrire un autre composant Icon simple, le répertoire est le suivant🎜🎜<img src="https://img.php.cn/upload/article/000/887/227/168387469647663.png" alt="Comment utiliser glup dans Vue3 Packagez la bibliothèque de composants et implémenter le chargement à la demande">🎜🎜Enfin, exécutez <code>pnpm run build dans le répertoire racine pour terminer l'empaquetage🎜🎜🎜🎜Puisque l'empaquetage vite ignore moins l'empaquetage de fichiers, les fichiers empaquetés se rencontrent. L'introduction de moins le fichier sera automatiquement ignoré, donc le code importé n'a pas changé🎜🎜🎜🎜Mais nous avons empaqueté le fichier less dans un fichier CSS, nous devons donc remplacer .less dans le code par .css 🎜🎜Ajoutez 🎜rrreee🎜 aux plugins dans composants/vite.config.ts À ce moment, exécutez pnpm run build:easyest, puis regardez le. introduction au fichier packagé🎜🎜🎜🎜À l'heure actuelle, .less a été remplacé par .css. Après l'empaquetage, la prochaine chose à faire est de le publier ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!