qiankun-boot 一个开箱即用的 qiankun cli

qiankun-boot 指南

---

传送门：qiankun-boot

由于业务需要，最近开始研究起了前端微服务，经过比对，single-spa， wujie 等前端微服务框架后，发现社区普遍推荐使用 qiankun，受众广就意味着出了问题方便找人询问，但是万万没想到啊，就这还是踩了一箩筐的坑啊。

say more all tears

痛定思痛，决定写个工具，方便开新坑的时候能够快速 demo。名字借鉴了spring-boot，就叫 qiankun-boot

ps：由于线上只会提供一台服务器，所以采用了二级目录的形式部署子项目。目前仅支持 react 项目，支持最新 react

准备工作

---

1. 使用前先确认 bash 所在位置(> which bash )，如有必要修改头文件 #!/opt/homebrew/bin/bash -> #!/usr/bin/bash
2. 注意 bash 的版本需要在4以上 (> bash --version)
2. 确认是否安装 gsed（mac 用户） 或者替换 gsed -> sed (windows 用户)
3. 切换 node 到最新版本(nvm use stable)

配置工程

---

qiankun-boot/conf.sh

# 工程名称
target_dir=mic-frontend

# 空白仓库地址
git_url=https://e.coding.net/vite-man/we-project/$target_dir.git

# nexus npm hosted
nexus_registry=http://localhost:8081/repository/npm-hosted/

# 主应用端口(微应用端口依次累加)
port=3000

# 工程名称(主 微应用1 微应用2 ...)
projects=(main sea land)

# 默认打开的微服务
default_micro=${projects[1]}

# 当前微服务所在的路由路径名
pathname=system

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

创建工程

---

mkdir project-directory

cd project-directory

ln -s **/qiankun-boot/init.sh ./

chmod 770 ./init.sh

./init.sh

1
2
3
4
5
6
7
8
9
10

(ง •̀*•́)ง (ง •̀*•́)ง (ง •̀_•́)ง

到此一个新的工程模版已经被创建出来了！！！！

在开发环境下运行

cd $target_dir
yarn start
1
2

预览线上环境

---

cd $target_dir
yarn nginx:start
# 开发过程中有接口调用的，去 nginx.conf 中配置代理即可

# 停止预览
yarn nginx:stop
1
2
3
4
5
6

新增微应用

---

ln -s **/qiankun-boot/new-app.sh ./
chmod 770 ./new-app.sh
./new-app.sh
1
2
3

新增共享工程

---

ln -s **/qiankun-boot/new-pkg.sh ./
chmod 770 ./new-pkg.sh
./new-pkg.sh
1
2
3

ps: 共享工程是一个空仓库，可以满足快速开发共享配置，组建

安装依赖

---

cd mic-frontend

# 安装所有依赖
yarn

or

# 安装指定微服务依赖
yarn workspace xxx add dependence1 dependence2

1
2
3
4
5
6
7
8
9
10

开发联调

---

# 创建 link
cd packages/config

yarn link

# 建立链接
cd app/index

yarn link config

# 取消link
cd /app/index

yarn unlink config
1
2
3
4
5
6
7
8
9
10
11
12
13
14

发布

---

所有仓库

yarn publish
1

单独发布

npm config set registry http://localhost:8081/repository/npm-hosted/
npm login
yarn publish:independent
1
2
3

修复某一个仓库旧版本 bug

---

git checkout -b commit_uuid
1

推荐资料

---

如何在 React 中使用 Axios

什么是好的 react 代码