引言
本期咋們就先放一放源碼，咋們?nèi)绾未虬黰onorepo應(yīng)用，主要是源碼看累了，打包工具也是一門必須課，所有的源碼請(qǐng)查看
效果
為了提供大家的學(xué)習(xí)興趣，咋們先來(lái)看看效果，準(zhǔn)備發(fā)車，請(qǐng)系好安全帶
cjs 結(jié)果預(yù)覽
esm 結(jié)果預(yù)覽
聲明文件預(yù)覽
正文
vue3使用的是rollup來(lái)打包的，咋們也用rollup來(lái)打包咋們的應(yīng)用，有不了解rollup的請(qǐng)查看官網(wǎng)，monorepo是多個(gè)單體倉(cāng)庫(kù)合并得到的，那么咋們就先來(lái)打包單個(gè)倉(cāng)庫(kù)，然后再來(lái)想辦法怎么一鍵打包全部
打包shared
在我項(xiàng)目中，shared倉(cāng)庫(kù)是相當(dāng)與utils函數(shù)的集合，用于對(duì)外導(dǎo)出一些工具函數(shù),那么咋們可以在本目錄下的package.json中安裝rollup。 正當(dāng)我就想在shared目錄下面安裝rollup插件的時(shí)候，我大腦給了個(gè)慢著的問(wèn)號(hào)？
monorepo 是不是可以在跟下面安裝依賴，然后子包都可以共享，基于這一特征。我毫不猶豫在根目錄下面敲下了下面的命令：
pnpm add rollup -w -D復(fù)制代碼
有了rollup,咋們是不是需要在打包的目錄下面來(lái)搞個(gè)配置文件rollup.config.js，里面咋們寫上入口，出口,打包的格式等
// 由于咋們需要打包成cjs, ems的格式，對(duì)外導(dǎo)出一個(gè)函數(shù)吧[ { input: ‘./src/index.ts’, output: { file: ‘dist/index.esm.js’, format: ‘esm’, }, }, { input: ‘./src/index.ts’, output: { file: ‘dist/index.cjs.js’, format: ‘cjs’, }, } ]復(fù)制代碼
然后在本目錄下的package.json中加入打包的命令：
“build”: “rollup -c”復(fù)制代碼
nice, 到這了就完了，咋們?cè)囈幌?，結(jié)果：
分析錯(cuò)誤可以發(fā)現(xiàn)，咋們是用了ts的語(yǔ)法，rollup無(wú)法轉(zhuǎn)換ts的語(yǔ)法，需要使用插件了。
那么rollup轉(zhuǎn)換ts的插件也是有好多種，這里咋們用一個(gè)最快的那種，esbuild, rollup-plugin-esbuild
pnpm add esbuild rollup-plugin-esbuild -w -D復(fù)制代碼
關(guān)于rollup-plugin-esbuild這個(gè)插件，官方的介紹是說(shuō)：
esbuild is by far one of the fastest TS/ESNext to ES6 compilers and minifier, this plugin replaces rollup-plugin-typescript2, @rollup/plugin-typescript and rollup-plugin-terser for you. 意思是說(shuō)，這個(gè)插件是目前來(lái)說(shuō)轉(zhuǎn)換ts/esnext到es6是最快的編譯和壓縮，這個(gè)插件可以代替 rollup-plugin-typescript2, @rollup/plugin-typescript and rollup-plugin-terser的集合
但是如果咋們需要打包非常低版本的代碼，那就請(qǐng)查看rollup 實(shí)戰(zhàn)第三節(jié) 打包生產(chǎn)打包低版本的代碼.
言歸正傳，那么咋們把插件用上，在配置文件上加上插件
//… 省略其他plugins: [ esbuild({ target: ‘node14’, }), ]復(fù)制代碼
再來(lái)一次
通過(guò)結(jié)果，咋們可以看到已經(jīng)打包成功了！
但是咋們是有ts的，肯定還需要生成咋們代碼的類型吧，那就使用 rollup-plugin-dts這個(gè)來(lái)生成
pnpm add rollup-plugin-dts -w -D復(fù)制代碼
rollup-plugin-dts詳情請(qǐng)查看
// 在數(shù)組后面在加上一項(xiàng)，{ input: ‘./src/index.ts’, output: { file: ‘dist/index.dts’, format: ‘esm’, }, plugins: [ dts(), ], },復(fù)制代碼
然后就可以ok啦，咋們單個(gè)項(xiàng)目就完成了
打包多個(gè)
既然單個(gè)是這么寫，那么其他的咋們是不是也可以寫配置文件呢？對(duì)的，沒(méi)錯(cuò)，可以在對(duì)應(yīng)的單體項(xiàng)目下面寫上rollup.config.js來(lái)對(duì)他們進(jìn)行打包的配置
然后咋們?cè)诟夸浵旅娴膒ackage.json中加入一行命令：
“build”: “pnpm -r –filter=./packages/** run build”復(fù)制代碼
咋們來(lái)拆分下命令
合起來(lái)的意思是說(shuō)，依次執(zhí)行packages里面所有文件夾的package.json的build命令
優(yōu)化
通過(guò)上面的方式咋們就可以打包成功了，但是這里咋們還可以進(jìn)行優(yōu)化下，每一次打包dist結(jié)果都需要手動(dòng)刪除，咋們可以使用 rimraf 這個(gè)庫(kù)來(lái)幫我們自動(dòng)刪除
pnpm add rimraf -d -W復(fù)制代碼
然后在每一個(gè)子包中修改build的命令
“build”: “rimraf dist && rollup -c”復(fù)制代碼
對(duì)比vue3打包
這里可能有的人會(huì)說(shuō)，vue3倉(cāng)庫(kù)都不是這么玩的，的確，vue3倉(cāng)庫(kù)的打包流程如下：
有興趣的可以取看源碼哈，這里給出流程圖，想要使用這種方式的就自己實(shí)現(xiàn)哈！
