This shell for micro front end t

一个微前端打包的shell脚本

This is for the guys on the front web develop。

1.目录结构

创建一个主应用和三个子应用，这里主要为了分享一个自动打包脚本，微前端这里不过多介绍
首先我们创建以下三个项目

├── child1
├── child2
├── child3
└── main

2.创建micro_web_build.sh文件

├── build.sh
├── child1
├── child2
├── child3
└── main

2.1目录指定

#!/bin/bash

#当你在脚本的第一行添加 `#!/bin/bash` 时，你可以直接运行脚本，而不需要在命令行中输入 `bash script.sh`。只需将脚本设置为可执行（使用 `chmod +x script.sh`），然后直接运行它（使用 `./script.sh`）。系统将自动使用指定的解释器（在这种情况下是 `/bin/bash`）来执行脚本。


# 主应用目录
main_app_dir="main"
# 子应用目录数组
sub_app_dirs=("child1" "child2" "child3")
# 主应用打包目录
main_app_dist_dir="${main_app_dir}/dist"
# 子应用打包目录
sub_app_dist_dir="dist"

2.2首先打包主应用

# 切换到主应用目录并打包
cd ${main_app_dir}
npm install
npm run build
# 打包结束后切换回上级目录
cd ..

2.3子应用处理

# 这里我们之间简单粗暴的处理，遍历子应用目录数组
for subapp_dir in "${sub_app_dirs[@]}"; do
  mkdir ${main_app_dist_dir}/${subapp_dir}
  # 切换到子应用目录并打包
  cd ${subapp_dir}
  npm install
  npm run build

  #2.3.1 将子应用打包后的文件移动到主应用打包目录下
    mv ${sub_app_dist_dir}/* ../${main_app_dist_dir}/${subapp_dir}
  
    #2.3.2 将子应用打包后的文件拷贝到主应用打包目录下
  #cp -r ${sub_app_dist_dir}/* ../${main_app_dist_dir}/${subapp_dir}

  # 切换回上级目录
  cd ..

3.完整代码，上面墨迹半天了，小伙伴们没啥内心的就直接看这里。

#!/bin/bash
echo "🚚build......"
# 主应用目录
main_app_dir="main"
# 子应用目录数组
sub_app_dirs=("child1" "child2" "child3")
# 主应用打包目录
main_app_dist_dir="${main_app_dir}/dist"
# 子应用打包目录
sub_app_dist_dir="dist"

# 切换到主应用目录并打包
cd ${main_app_dir}
npm install
npm run build

# 切换回上级目录
cd ..

# 遍历子应用目录数组
for subapp_dir in "${sub_app_dirs[@]}"; do
  mkdir ${main_app_dist_dir}/${subapp_dir}
  # 切换到子应用目录并打包
  cd ${subapp_dir}
  npm install
  npm run build

  # 将子应用打包后的文件移动到主应用打包目录下
  # mv ${sub_app_dist_dir}/* ../${main_app_dist_dir}/${subapp_dir}
  # 将子应用打包后的文件移拷贝到主应用打包目录下
  cp -r ${sub_app_dist_dir}/* ../${main_app_dist_dir}/${subapp_dir}

  # 切换回上级目录
  cd ..
done

echo "🔚打包完成，主应用及子应用已打包到 ${main_app_dist_dir} 目录下。"

4.看是没有用滴，自己动手试试。

小结

以上是一个使用微前端解决方案，打包一个主应用和三个子应用，

并将它们都移或者拷贝到主应用的打包目录下的shell脚本。

根据你的项目结构和需求进行相应的调整。

注意：并确保它具有可执行权限。然后在项目根目录中运行此脚本