使用 glup 打包組件庫并實作按需加載
當我們使用 Vite 庫模式打包的時候,vite 會將樣式檔案全部打包到同一個檔案中,這樣的話我們每次都要全量引入所有樣式檔案做不到按需引入的效果，所以打包的時候我們可以不讓 vite 打包樣式檔案,樣式檔案將使用 gulp 進行打包，那么本篇文章將介紹如何使用 gulp 打包樣式檔案,以及如何按需加載樣式檔案，
自動按需引入插件
現在很多組件庫的按需引入都是借助插件來解決的,比如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已經被替換成了.css,打包完畢,接下來要做的就是發布了,下篇文章將介紹如何發布一個組件庫,歡迎點贊+關注!
如果你對組件庫開發感興趣的話,歡迎掃碼關注公眾號:web前端進階，組件庫所有實作包括環境搭建，自動打包發布，檔案搭建，vitest單元測驗等等都在這里
本篇文章對應代碼地址使用 glup 打包組件庫并實作按需加載
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/547959.html
標籤：其他