Vue3组件库打包指南，一次生成esm、esm

2026-02-05 14:41:10投稿人：皇帝彩票大廳(南寧)有限公司圍觀6次63 評(píng)論

Vue3組件庫打包指南，一次生成esm、esm-bundle、commonjs、umd

本文為Varlet組件庫源碼主題閱讀系列第二篇，讀完本篇，你可以了解到如何將一個(gè)Vue3組件庫打包成各種格式

上一篇里提到了啟動(dòng)服務(wù)前會(huì)先進(jìn)行一下組件庫的打包，運(yùn)行的命令為：

varlet-cli compile

顯然是varlet-cli提供的一個(gè)命令：

處理函數(shù)為compile ，接下來我們?cè)敿?xì)看一下這個(gè)函數(shù)都做了什么。

// varlet-cli/src/commands/compile.tsexport async function compile(cmd: {  noUmd: boolean }) {     process.env.NODE_ENV = 'compile'    await removeDir()    // ...}// varlet-cli/src/commands/compile.tsexport function removeDir() {     // ES_DIR：varlet-ui/es    // LIB_DIR	：varlet-ui/lib    // HL_DIR：varlet-ui/highlight    // UMD_DIR：varlet-ui/umd    return Promise.all([remove(ES_DIR), remove(LIB_DIR), remove(HL_DIR), remove(UMD_DIR)])}

首先設(shè)置了一下當(dāng)前的環(huán)境變量，然后清空相關(guān)的輸出目錄。

// varlet-cli/src/commands/compile.tsexport async function compile(cmd: {  noUmd: boolean }) {     // ...    process.env.TARGET_MODULE = 'module'    await runTask('module', compileModule)    process.env.TARGET_MODULE = 'esm-bundle'    await runTask('esm bundle', () =>compileModule('esm-bundle'))    process.env.TARGET_MODULE = 'commonjs'    await runTask('commonjs', () =>compileModule('commonjs'))    process.env.TARGET_MODULE = 'umd'    !cmd.noUmd && (await runTask('umd', () =>compileModule('umd')))}

接下來依次打包了四種類型的產(chǎn)物，方法都是同一個(gè)compileModule，這個(gè)方法后面會(huì)詳細(xì)分析。

組件的基本組成

以Button組件為例看一下未打包前的組件結(jié)構(gòu) ：

一個(gè)典型組件的構(gòu)成主要是四個(gè)文件：

.less：樣式
.vue：組件
index.ts：導(dǎo)出組件，提供組件注冊(cè)方法
props.ts：組件的props定義

樣式部分Varlet使用的是less語言，樣式比較少的話會(huì)直接內(nèi)聯(lián)寫到Vue單文件的style塊中，否則會(huì)單獨(dú)創(chuàng)建一個(gè)樣式文件，比如圖中的button.less，每個(gè)組件除了引入自己本身的樣式外，還會(huì)引入一些基本樣式、其他組件的樣式：

index.ts文件用來導(dǎo)出組件，提供組件的注冊(cè)方法：

props.ts文件用來聲明組件的props類型：

有的組件沒有使用.vue，而是.tsx，也有些組件會(huì)存在其他文件，比如有些組件就還存在一個(gè)provide.ts文件，用于向子孫組件注入數(shù)據(jù)。

打包的整體流程

首先大致過一遍整體的打包流程，主要函數(shù)為compileModule：

// varlet-cli/src/compiler/compileModule.tsexport async function compileModule(modules: 'umd' | 'commonjs' | 'esm-bundle' | boolean = false) {   if (modules === 'umd') {     // 打包umd格式    await compileUMD()    return  }  if (modules === 'esm-bundle') {     // 打包esm-bundle格式    await compileESMBundle()    return  }      // 打包c(diǎn)ommonjs和module格式  // 打包前設(shè)置一下環(huán)境變量  process.env.BABEL_MODULE = modules === 'commonjs' ? 'commonjs' : 'module'  // 輸出目錄  // ES_DIR：varlet-ui/es  // LIB_DIR：varlet-ui/lib  const dest = modules === 'commonjs' ? LIB_DIR : ES_DIR  // SRC_DIR：varlet-ui/src，直接將組件的源碼目錄復(fù)制到輸出目錄  await copy(SRC_DIR, dest)  // 讀取輸出目錄  const moduleDir: string[] = await readdir(dest)  // 遍歷打包每個(gè)組件  await Promise.all(    // 遍歷每個(gè)組件目錄    moduleDir.map((filename: string) =>{       const file: string = resolve(dest, filename)      if (isDir(file)) {         // 在每個(gè)組件目錄下新建兩個(gè)樣式入口文件        ensureFileSync(resolve(file, './style/index.js'))        ensureFileSync(resolve(file, './style/less.js'))      }      // 打包組件      return isDir(file) ? compileDir(file) : null    })  )  // 遍歷varlet-ui/src/目錄，找出所有存在['index.vue', 'index.tsx', 'index.ts', 'index.jsx', 'index.js']這些文件之一的目錄  const publicDirs = await getPublicDirs()  // 生成整體的入口文件  await (modules === 'commonjs' ? compileCommonJSEntry(dest, publicDirs) : compileESEntry(dest, publicDirs))}

umd和esm-bundle兩種格式都會(huì)把所有內(nèi)容都打包到一個(gè)文件，用的是Vite提供的方法進(jìn)行打包。

commonjs和module是單獨(dú)打包每個(gè)組件，不會(huì)把所有組件的內(nèi)容都打包到一起，Vite沒有提供這個(gè)能力，所以需要自行處理，具體操作為：

国产自91精品一区二区,久久日韩精品一区二区三区,国内老熟妇对白HDXXXX,国产精品一区二区三广区,久久精品亚洲中文字幕无码麻豆

登錄

Vue3组件库打包指南，一次生成esm、esm

組件的基本組成

打包的整體流程

国产自91精品一区二区,久久日韩精品一区二区三区,国内老熟妇对白HDXXXX,国产精品一区二区三广区,久久精品亚洲中文字幕无码麻豆

登錄

Vue3组件库打包指南，一次生成esm、esm

組件的基本組成

打包的整體流程

Vue3组件库打包指南，一次生成esm、esm