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，接下來我們詳細(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)出組件，提供組件注冊方法

props.ts ：組件的props定義

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