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

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

自动按需引入插件

现在很多组件库的按需引入都是借助插件来解决的,比如ElementPlus是使用unplugin-vue-components和unplugin-auto-import,这两个插件可以实现

因涉及一些执行语句，禁止写入，请联系客服获取

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

删除打包文件

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

在 script/utils 中新建 paths.ts 用于维护组件库路径,记得先安装

因涉及一些执行语句，禁止写入，请联系客服获取

删除打包目录函数可以放在 bulid/utils 中的 delpath.ts,注意这里因为打包后的 easyest 包是我们最终要发布的包,所以我们需要将package.json和README.md保留下来

因涉及一些执行语句，禁止写入，请联系客服获取

使用 gulp

我们需要使用 ts 以及新的 es6 语法，而 gulp 是不支持的，所以我们需要安装一些依赖使得 gulp 支持这些,其中 sucras 让我们执行 gulp 可以使用最新语法并且支持 ts

因涉及一些执行语句，禁止写入，请联系客服获取

在 build/index.ts 来执行删除流程

因涉及一些执行语句，禁止写入，请联系客服获取

在根目录 easyest/package.json 添加脚本

因涉及一些执行语句，禁止写入，请联系客服获取

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

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

gulp 打包样式

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

因涉及一些执行语句，禁止写入，请联系客服获取

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

因涉及一些执行语句，禁止写入，请联系客服获取

打包组件

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

因涉及一些执行语句，禁止写入，请联系客服获取

然后引入 run 函数

因涉及一些执行语句，禁止写入，请联系客服获取

最后 vite 打包的时候忽略 less 文件,components/vite.config.ts

因涉及一些执行语句，禁止写入，请联系客服获取

为了更好的看打包后的效果,我们可以再写一个简单的 Icon 组件,目录如下

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

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

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

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

因涉及一些执行语句，禁止写入，请联系客服获取

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

此时.less已经被替换成了.css,打包完毕,接下来要做的就是发布了,下篇文章将介绍如何发布一个组件库,欢迎点赞+关注!