一個(gè)微前端打包的shell腳本
This is for the guys on the front web develop。
1.目錄結(jié)構(gòu)
創(chuàng)建一個(gè)主應(yīng)用和三個(gè)子應(yīng)用，這里主要為了分享一個(gè)自動(dòng)打包腳本，微前端這里不過(guò)多介紹
首先我們創(chuàng)建以下三個(gè)項(xiàng)目
├── child1
├── child2
├── child3
└── main
2.創(chuàng)建micro_web_build.sh文件
├── build.sh
├── child1
├── child2
├── child3
└── main
2.1目錄指定
#!/bin/bash
#當(dāng)你在腳本的第一行添加 `#!/bin/bash` 時(shí)，你可以直接運(yùn)行腳本，而不需要在命令行中輸入 `bash script.sh`。只需將腳本設(shè)置為可執(zhí)行（使用 `chmod +x script.sh`），然后直接運(yùn)行它（使用 `./script.sh`）。系統(tǒng)將自動(dòng)使用指定的解釋器（在這種情況下是 `/bin/bash`）來(lái)執(zhí)行腳本。
# 主應(yīng)用目錄
main_app_dir="main"
# 子應(yīng)用目錄數(shù)組
sub_app_dirs=("child1" "child2" "child3")
# 主應(yīng)用打包目錄
main_app_dist_dir="${main_app_dir}/dist"
# 子應(yīng)用打包目錄
sub_app_dist_dir="dist"
2.2首先打包主應(yīng)用
# 切換到主應(yīng)用目錄并打包
cd ${main_app_dir}
npm install
npm run build
# 打包結(jié)束后切換回上級(jí)目錄
cd ..
2.3子應(yīng)用處理
# 這里我們之間簡(jiǎn)單粗暴的處理，遍歷子應(yīng)用目錄數(shù)組
for subapp_dir in "${sub_app_dirs[@]}"; do
mkdir ${main_app_dist_dir}/${subapp_dir}
# 切換到子應(yīng)用目錄并打包
cd ${subapp_dir}
npm install
npm run build
#2.3.1 將子應(yīng)用打包后的文件移動(dòng)到主應(yīng)用打包目錄下
mv ${sub_app_dist_dir}/* ../${main_app_dist_dir}/${subapp_dir}
#2.3.2 將子應(yīng)用打包后的文件拷貝到主應(yīng)用打包目錄下
#cp -r ${sub_app_dist_dir}/* ../${main_app_dist_dir}/${subapp_dir}
# 切換回上級(jí)目錄
cd ..
3.完整代碼，上面墨跡半天了，小伙伴們沒(méi)啥內(nèi)心的就直接看這里。
#!/bin/bash
echo "??build......"
# 主應(yīng)用目錄
main_app_dir="main"
# 子應(yīng)用目錄數(shù)組
sub_app_dirs=("child1" "child2" "child3")
# 主應(yīng)用打包目錄
main_app_dist_dir="${main_app_dir}/dist"
# 子應(yīng)用打包目錄
sub_app_dist_dir="dist"
# 切換到主應(yīng)用目錄并打包
cd ${main_app_dir}
npm install
npm run build
# 切換回上級(jí)目錄
cd ..
# 遍歷子應(yīng)用目錄數(shù)組
for subapp_dir in "${sub_app_dirs[@]}"; do
mkdir ${main_app_dist_dir}/${subapp_dir}
# 切換到子應(yīng)用目錄并打包
cd ${subapp_dir}
npm install
npm run build
# 將子應(yīng)用打包后的文件移動(dòng)到主應(yīng)用打包目錄下
# mv ${sub_app_dist_dir}/* ../${main_app_dist_dir}/${subapp_dir}
# 將子應(yīng)用打包后的文件移拷貝到主應(yīng)用打包目錄下
cp -r ${sub_app_dist_dir}/* ../${main_app_dist_dir}/${subapp_dir}
# 切換回上級(jí)目錄
cd ..
done
echo "??打包完成，主應(yīng)用及子應(yīng)用已打包到 ${main_app_dist_dir} 目錄下。"
4.看是沒(méi)有用滴，自己動(dòng)手試試。
小結(jié)
以上是一個(gè)使用微前端解決方案，打包一個(gè)主應(yīng)用和三個(gè)子應(yīng)用，
并將它們都移或者拷貝到主應(yīng)用的打包目錄下的shell腳本。
根據(jù)你的項(xiàng)目結(jié)構(gòu)和需求進(jìn)行相應(yīng)的調(diào)整。
