本篇文章將介紹如何使用 vite 打包我們的組件庫,同時告訴大家如何使用插件讓打包后的檔案自動生成宣告檔案(*.d.ts)
打包配置
vite 專門提供了庫模式的打包方式,配置其實非常簡單,首先全域安裝 vite 以及@vitejs/plugin-vue
pnpm add vite @vitejs/plugin-vue -D -w
在 components 檔案下新建vite.config.ts組態檔
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
export default defineConfig({
build: {
//打包后檔案目錄
outDir: "es",
//壓縮
minify: false,
rollupOptions: {
//忽略打包vue檔案
external: ["vue"],
//input: ["index.ts"],
output: {
globals: {
vue: "Vue",
},
dir: "dist",
},
},
lib: {
entry: "./index.ts",
name: "easyest",
fileName: "easyest",
formats: ["es", "umd", "cjs"],
},
},
plugins: [vue()],
});
然后在 components/package.json 添加打包命令scripts
"scripts": {
"build": "vite build"
},
執行pnpm run build
同時生成了打包后的 dist 檔案
但是這種打包方式最侄訓將整個組件庫打包到一個檔案中,并且樣式檔案也不能按需加載,所以我們需要修改一下配置讓打包后的結構和我們開發的結構一致,如下配置我們將打包后的檔案放入 easyest 目錄下,因為后續發布組件庫的名字就是 easyest，當然這個命名大家可以隨意
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
export default defineConfig({
build: {
//打包檔案目錄
outDir: "es",
//壓縮
//minify: false,
rollupOptions: {
//忽略打包vue檔案
external: ["vue"],
input: ["index.ts"],
output: [
{
//打包格式
format: "es",
//打包后檔案名
entryFileNames: "[name].mjs",
//讓打包目錄和我們目錄對應
preserveModules: true,
exports: "named",
//配置打包根目錄
dir: "../easyest/es",
},
{
//打包格式
format: "cjs",
//打包后檔案名
entryFileNames: "[name].js",
//讓打包目錄和我們目錄對應
preserveModules: true,
exports: "named",
//配置打包根目錄
dir: "../easyest/lib",
},
],
},
lib: {
entry: "./index.ts",
},
},
plugins: [vue()],
});
執行pnpm run build,此時生成打包后的檔案目錄如下
但是此時的所有樣式檔案還是會統一打包到 style.css 中,還是不能進行樣式的按需加載,所以接下來我們將讓 vite 不打包樣式檔案,樣式檔案后續單獨進行打包，
宣告檔案
到這里其實打包的組件庫只能給 js 專案使用,在 ts 專案下運行會出現一些錯誤，而且使用的時候還會失去代碼提示功能，這樣的話我們就失去了用 ts 開發組件庫的意義了，所以我們需要在打包的庫里加入宣告檔案(.d.ts)，
安裝vite-plugin-dts,注意版本最好一致
pnpm add [email protected] -D -w
在vite.config.ts引入,注意這里同時添加了組件命名插件DefineOptions(上篇文章提到過,注意這個要寫在dts后面,原始碼中可能有誤)
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({
plugins: [
vue(),
dts({
entryRoot: "./src",
outputDir: ["../easyest/es/src", "../easyest/lib/src"],
//指定使用的tsconfig.json為我們整個專案根目錄下,如果不配置,你也可以在components下新建tsconfig.json
tsConfigFilePath: "../../tsconfig.json",
}),
DefineOptions(),
],
});
再次打包就會發現打包后檔案中出現了我們需要的宣告檔案
其實作在大部分前端構建腳手架都支持 esmodule 了,而 esmodule 本身就支持按需加載,所以說組件庫打包后的 es 格式它本身自帶 treeShaking,而不需要額外配置按需引入，后面我們要做的則是讓樣式檔案也支持按需引入，敬請期待，
關注公眾號 web前端進階 查看完整教程
本篇文章代碼地址 如何使用Vite打包組件庫,hxd們star一下
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/546114.html
標籤：其他