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

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

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

varlet-cli compile

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

處理函數(shù)為compile，接下來(lái)我們?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)的輸出目錄