文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Vue3如何使用glup打包组件库并实现按需加载

2023-07-06 11:05

关注

这篇文章主要介绍“Vue3如何使用glup打包组件库并实现按需加载”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Vue3如何使用glup打包组件库并实现按需加载”文章能帮助大家解决问题。

使用 glup 打包组件库并实现按需加载

当我们使用 Vite 库模式打包的时候,vite 会将样式文件全部打包到同一个文件中,这样的话我们每次都要全量引入所有样式文件做不到按需引入的效果。所以打包的时候我们可以不让 vite 打包样式文件,样式文件将使用 gulp 进行打包。

自动按需引入插件

现在很多组件库的按需引入都是借助插件来解决的,比如ElementPlus是使用unplugin-vue-componentsunplugin-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.jsonREADME.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";//删除easyestexport 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 下的文件被删除了

Vue3如何使用glup打包组件库并实现按需加载

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

gulp 打包样式

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

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

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

//打包样式export const buildStyle = () => {  return src(`${componentPath}/srcstylestyle/**.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,即可完成打包

Vue3如何使用glup打包组件库并实现按需加载

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

Vue3如何使用glup打包组件库并实现按需加载

但是我们已经将 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,然后再看打包后文件引入

Vue3如何使用glup打包组件库并实现按需加载

此时.less已经被替换成了.css,打包完毕,接下来要做的就是发布了!

关于“Vue3如何使用glup打包组件库并实现按需加载”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注编程网行业资讯频道,小编每天都会为大家更新不同的知识点。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯