一 为什么使用lerna
目前项目使用基于 qiankunJS的微前端架构，随着项目中微前端子系统越来越多，在业务发布流程中耗费时间越来越长，其中大量的时间用在 下载依赖包中； 所以如果能将各子系统中相同的依赖包只下载一次，可以节省大量的时间以及节省服务器储存空间；这里使用了 lerna 的依赖提升能力；
在微前端开发过程中，可能同时启动多个子系统，以往的方式只能手动进入子系统中各自启动， 通过lerrn 工具，可以同时执行各子系统下的 scripts 内的脚本，节省开发时间
理论上微前端的子系统应该都是比较独立的，但是仍然避免不了两个子系统，甚至多个子系统之间存在业务依赖关系，或者可以存在跨系统使用的公共组件，这里除了通过 qiankunJS 共享组件功能方案外，也可以利用 lerna 将子系统，或者组件打包成依赖项，提供给其他系统使用
其他: 还有一些比较便利的操作， 比如可以同步更新各子系统的版本号，同步打包等等，一些便捷性操作
二 已有项目如何落实
1.初始化 lerna
在项目根目录执行以下命名，初始化lerna
lerna init
可以在workspaces配置自定义的工作空间
2. 工作空间管理项目
如果已有项目，将项目移动到工作空间； 如果没用项目，在工作空间内创建
**注意事项: **
a. 要确保项目内 package.json 内的name 值是唯一的
b. package.json 内 的scripts 配置了项目相关命令，比如打包，启动测试环境等等；尽量将命令名统一，方便后面便捷操作
例如：
这里的 vue 和 vue2 项目为测试项目，用于举例
确定已被lerna 工具管理
#项目根目录执行，
lerna list
已被管理的项目列表
3. 启动项目
a. 依赖关系管理
使用yarn 代替 npm 做为依赖管理。
lerna 默认是使用npm 做为依赖包管理， npm 一方面在多个项目依赖关系管理方面比较薄弱，另一方面下载依赖的速度上比较慢，对比下yarn 工具，这两方面都不存在。
# yarn 工具依赖于nodejs 环境
# 如果你的系统没用安装yarn 工具，先安装
npm install yarn -g
#测试是否安装好
yarn --version
#安装成功
修改lerna.json 默认配置
{
"useWorkspaces": true,
"version": "0.0.0",
"npmClient": "yarn",
"workspaces": [
"projects/*"
]
}
package.json 增加workspaces
{
"workspaces": [
"projects/*"
],
"name": "root",
"private": true,
"devDependencies": {
"lerna": "^4.0.0"
},
"scripts": {
"lint:style": "lerna run lint:style",
"lint:js": "lerna run lint:js ",
"dev": "lerna run dev",
"build:dev": "lerna run build:dev",
"build:test": "lerna run build:test"
}
}
b. 下载依赖包
lerna bootstrap
备注: 因为使用了yarn 做为依赖关系， 天然已经做好了依赖提升功能，projects 下的各项目，所有相同的依赖都已提升到根目录下的node_modules 中，各子系统只保留了自身独有的依赖包
c. 启动项目
# 第一种方式
lerna run dev
#第二种方式
lerna exec yarn run dev
注意事项:
第一种使用 lerna run dev 启动后； 如果在命令面板终止命令 (ctrl + c); 会发下服务仍然可以访问，终止终端启动是无效的。这里智能通过强制关闭进程来终止服务，具体如下
######## 如果你是 windows系统
# 查询该端口进程 8088 意思是你服务的端口
netstat -aon | findstr 8088
# 杀掉进程 37904 意思是8088 的进程号
taskkill /f /pid 37904
######## 如果你是 linux系统
# 查询该端口进程 8088 意思是你服务的端口
lsof -i | grep 8088
# 杀掉进程 37904 意思是8088 的进程号
kill -p 37904
第二种启动方式和之前模式一样，使用ctrl+c 终止终端时，就可以同时关闭服务进程
d. 启动成功后
访问服务
vue服务
vue2服务
need-to-insert-img
三 管理跨系统公共组件
例如 conponentsA 目录内的组件都是可以被vue项目，和vue2项目做为依赖调用的
可以利用
# 将 conponentsA 目录做为依赖 加入vue子系统
lerna add conponentsA --scope=vue
#如下图
这样可以在vue子系统直接调用conponentsA 中管理的插件了
备注:
将微前端中公共的组件统一提取到conponentsA 模块进行维护；里面组件的编写方式可以参考 vue官方文档的插件编写
四 日常便捷操作
前置条件： 使用lerna run 执行对应操作的名字，这个名字在各个子系统必须提交存在； 例如 learn run dev 启动项目，实际各个子系统package.json 的 scripts 中已经配置了
”dev“ 的操作
通用参数
#用于指定项目包，如果是多个包就用多个scope; xxx的名称是 package.json 的name值
--scope=xxx
1.启动项目
lerna exec yarn run dev
只启动指定包的项目
#只运行vue子系统项目
learn exec --scope=vue run dev
#只运行vue子系统项目 和 vue2项目
learn exec --scope=vue --scope=vue2 run dev
2.打包
打包测试环境
learn run build:test
五 其他常用命令
1.清除工作目录各项目的node_modules依赖
lerna clean
2.查询 lerna 管理的项目
lerna list
3.查询lerna 版本
lerna -v
六 learn 管理项目案例
目前以AI管理后台为例，如何开始使用lerna
提前准备好yarn 工具 以及 lerna 工具，如果你的系统未安装，请先安装
npm install lerna -g
npm install yarn -g
1. 拉取代码
git clone http://221.178.153.117:62000/ai/admin_web.git
2.下载依赖
lerna bootstrap
3.启动项目
need-to-insert-img
# 启动所有微前端子系统
lerna exec yarn run serve
# 只启用main 子系统
lerna exec --scope=main yarn run serve
#只启用 main子系统 和 portalManager 子系统
lerna exec --scope=main --scope=portalManager yarn run serve
4.下载依赖包
开发过程中，可能需要下载第三方依赖包；
# 在所有的系统中下载
lerna add xxxx@version
#只在 main系统中下载
lerna add --scope=main xxxx@version
5.代码打包
# 打包测试环境 所有微前端子系统
lerna exec yarn run build:test
# 只打包测试环境 main 子系统
lerna exec --scope=main yarn run build:test
#只打包测试环境 main 子系统 和 portalManager 子系统
lerna exec --scope=main --scope=portalManager yarn run build:test
参考：
lerna中文文档:
http://febeacon.com/lerna-docs-zh-cn/routes/commands/
