Vue3组件库打包指南,一次生成esm、esm
Vue3組件庫打包指南,一次生成esm、esm-bundle、commonjs
、umd
本文為Varlet組件庫源碼主題閱讀系列第二篇,讀完本篇 ,你可以了解到如何將一個Vue3組件庫打包成各種格式
上一篇里提到了啟動服務前會先進行一下組件庫的打包 ,運行的命令為:
varlet-cli compile顯然是varlet-cli提供的一個命令:

處理函數為compile,接下來我們詳細看一下這個函數都做了什么 。
// 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)])}首先設置了一下當前的環(huán)境變量