您好,登錄后才能下訂單哦!
這篇文章主要介紹“Vue3怎么使用glup打包組件庫(kù)并實(shí)現(xiàn)按需加載”,在日常操作中,相信很多人在Vue3怎么使用glup打包組件庫(kù)并實(shí)現(xiàn)按需加載問(wèn)題上存在疑惑,小編查閱了各式資料,整理出簡(jiǎn)單好用的操作方法,希望對(duì)大家解答”Vue3怎么使用glup打包組件庫(kù)并實(shí)現(xiàn)按需加載”的疑惑有所幫助!接下來(lái),請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧!
當(dāng)我們使用 Vite 庫(kù)模式打包的時(shí)候,vite 會(huì)將樣式文件全部打包到同一個(gè)文件中,這樣的話我們每次都要全量引入所有樣式文件做不到按需引入的效果。所以打包的時(shí)候我們可以不讓 vite 打包樣式文件,樣式文件將使用 gulp 進(jìn)行打包。那么本篇文章將介紹如何使用 gulp 打包樣式文件,以及如何按需加載樣式文件。
現(xiàn)在很多組件庫(kù)的按需引入都是借助插件來(lái)解決的,比如ElementPlus
是使用unplugin-vue-components
和unplugin-auto-import
,這兩個(gè)插件可以實(shí)現(xiàn)
import { Button } from "easyest"; //相當(dāng)于 import "easyest/es/src/button/style/index.css"; import "easyest/es/src/button/index.mjs";
從而實(shí)現(xiàn)按需引入,這里不再過(guò)多展開這些插件的使用,因?yàn)楸酒恼碌闹攸c(diǎn)不在這里,感興趣的可以直接去查詢使用方式unplugin-vue-components
我們都知道,在打包之前是需要將前面打包的文件刪除的,所以需要先寫一個(gè)刪除函數(shù)。在此之前,我們先在 components 新建一個(gè) script 文件夾用于存放我們的腳本相關(guān)內(nèi)容,script 下的 build 文件夾里的內(nèi)容則是本篇文章要介紹的打包相關(guān)內(nèi)容。
在 script/utils 中新建 paths.ts 用于維護(hù)組件庫(kù)路徑,記得先安裝
pnpm add @types/node -D -w
import { resolve } from "path"; //組件庫(kù)根目錄 export const componentPath = resolve(__dirname, "../../"); //pkg根目錄 export const pkgPath = resolve(__dirname, "../../../");
刪除打包目錄函數(shù)可以放在 bulid/utils 中的 delpath.ts,注意這里因?yàn)榇虬蟮?easyest 包是我們最終要發(fā)布的包,所以我們需要將package.json
和README.md
保留下來(lái)
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;
我們需要使用 ts 以及新的 es6 語(yǔ)法,而 gulp 是不支持的,所以我們需要安裝一些依賴使得 gulp 支持這些,其中 sucras 讓我們執(zhí)行 gulp 可以使用最新語(yǔ)法并且支持 ts
pnpm i gulp @types/gulp sucrase -D -w
在 build/index.ts 來(lái)執(zhí)行刪除流程
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" },
根目錄下執(zhí)行pnpm run build:easyest
就會(huì)發(fā)現(xiàn) easyest 下的文件被刪除了
刪除完之后就可以開始打包樣式了
因?yàn)槲覀冇玫氖?less 寫的樣式,所以需要安裝gulp-less
,同時(shí)在安裝一個(gè)自動(dòng)補(bǔ)全 css 前綴插件gulp-autoprefixer
以及它們對(duì)應(yīng)的上面文件
pnpm add gulp-less @types/gulp-less gulp-autoprefixer @types/gulp-autoprefixer -D -w
然后寫一個(gè)打包樣式的函數(shù),這里使用到了 gulp 的dest
和src
函數(shù),不知道什么意思的樂(lè)意看上一篇文章 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`)); };
最后再寫一個(gè)打包組件的函數(shù),這里需要寫一個(gè)執(zhí)行命令的工具函數(shù),在 utils/run.ts
import { spawn } from "child_process"; export default async (command: string, path: string) => { //cmd表示命令,args代表參數(shù),如 rm -rf rm就是命令,-rf就為參數(shù) const [cmd, ...args] = command.split(" "); return new Promise((resolve, reject) => { const app = spawn(cmd, args, { cwd: path, //執(zhí)行命令的路徑 stdio: "inherit", //輸出共享給父進(jìn)程 shell: true, //mac不需要開啟,windows下git base需要開啟支持 }); //執(zhí)行完畢關(guān)閉并resolve app.on("close", resolve); }); };
然后引入 run 函數(shù)
//打包組件 export const buildComponent = async () => { run("pnpm run build", componentPath); };
因?yàn)榇虬鼧邮胶痛虬M件可以并行,所以最后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 打包的時(shí)候忽略 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/], ... } });
為了更好的看打包后的效果,我們可以再寫一個(gè)簡(jiǎn)單的 Icon 組件,目錄如下
最后根目錄執(zhí)行pnpm run build
,即可完成打包
由于 vite 打包忽略了 less 文件打包,所以打包后的文件遇到.less 文件的引入會(huì)自動(dòng)跳過(guò),所以引入代碼沒變
但是我們已經(jīng)將 less 文件打包成 css 文件了,所以我們需要將代碼中的.less
換成.css
在 components/vite.config.ts 中的 plugins 中新增
plugins: [ vue(), DefineOptions(), dts({ entryRoot: "./src", outputDir: ["../easyest/es/src", "../easyest/lib/src"], //指定使用的tsconfig.json為我們整個(gè)項(xiàng)目根目錄下,如果不配置,你也可以在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內(nèi)置方法,將所有輸出文件code中的.less換成.css,因?yàn)槲覀儺?dāng)時(shí)沒有打包less文件 this.emitFile({ type: "asset", fileName: key, //文件名名不變 source: bundler.code.replace(/\.less/g, ".css"), }); } }, }, ],
此時(shí)執(zhí)行pnpm run build:easyest
,然后再看打包后文件引入
此時(shí).less
已經(jīng)被替換成了.css
,打包完畢,接下來(lái)要做的就是發(fā)布了!
到此,關(guān)于“Vue3怎么使用glup打包組件庫(kù)并實(shí)現(xiàn)按需加載”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí),請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站,小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。