lerna + yarn workspace 入门今日话题 使用 lerna 和 yarn workspace 方式搭建
今日话题
使用 lerna 和 yarn workspace 方式搭建项目
作者:云层上的光
时间:2024年8月23日 09时32分14秒
一、快速上手
1、创建文件夹
mkdir demo-lerna && cd demo-lerna
2、lerna 下载
现在的 lerna
已经升级到 version 8.+
版本,之前的lerna add
等命令无法使用
演示阶段,是将lerna
版本降级到 v6.0.0
npm i -g lerna@6.0.0
本期内容还是基于 lerna 6.0
3、使用 lerna 初始化
lerna init
终端执行结果如下:
此时的目录结构如下:
.
├─ demo-lerna
│ ├─ packages
│ ├─ package.json
│ └─ lerna.json
4、使用 lerna 创建包
通过 lerna create 命令可以创建一个 utils 的 commonjs 的模块包
lerna create utils
现在使用的模块化 esModule 偏多,对 utils 改造如下:
调整 utils/lib/utils.js
文件,未来其他的工具函数在 lib 中新增文件,文件中 export 即可。
export function utils() {
return "Hello from utils";
}
index.js 文件调整如下:
export * from "./lib/utils";
一个 Utils 工具函数包的架子就算搭建完毕了,
5、packages 包中添加 vue 项目
进入 packages
文件夹
cd packages
基于vue-cli
生成 vue
项目
vue create demo-vue2
目录结构如下:
6、改造 utils 包
一般真实项目中,希望工具函数包和项目文件夹能够区分开,具体改造如下:
- common 用作公共包 (文件夹结构可自行设计)
- packages 用作项目包 (文件夹结构可自行设计)
根目录 package.json
文件改造如下:
{
"name": "root",
"private": true,
"workspaces": [
"packages/*",
"common/*"
],
"devDependencies": {
"lerna": "^6.0.0"
}
}
调整 utils
中的 package.json
7、demo-vue2项目中使用 utils 包
main.js
文件中代码验证:
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
Vue.config.productionTip = false;
// 验证
import { utils } from "@common/utils";
console.log(utils());
new Vue({
router,
store,
render: (h) => h(App),
}).$mount("#app");
进入 demo-vue2
项目,启动项目
npm run serve
显示报错,因为 @common/utils
依赖并未下载
在 demo-vue2
中安装本地 @common/utils
依赖,默认安装的是项目依赖
通过 lerna add
进行依赖添加:
lerna add @common/utils --scope=demo-vue2
需要安装开发依赖则需要
lerna add @common/utils --scope=demo-vue2 -D
重启 demo-vue2
项目
npm run serve
控制台输出:
8、全局依赖提升目标
进入 packages
文件夹
cd packages
基于vue-cli
生成 vue
项目,依旧是 vue2.0项目
vue create system
项目依赖和开发依赖都可提升,以项目依赖:
改造目标,统一由根目录来维护管理项目中通用依赖:
"dependencies": {
"@common/utils": "^0.0.0",
"core-js": "^3.8.3",
"vue": "^2.6.14",
"vue-router": "^3.5.1",
"vuex": "^3.6.2"
},
9、全局依赖安装前准备
删除 system
和 demo-vue2
中packages.json
文件的项目依赖
- vue
- vue-router
- vuex
- core-js
并且手动删除 system
和 demo-vue2
的node_modules
这一步可以交给 lerna
进行处理:
lerna clean
值得注意的是lerna
给我们提供了删除 node_modules
功能,但是根目录的node_modules
无法做到删除
10、yarn全局依赖提升
进入根目录 demo-lerna
进行依赖安装:
yarn add vue@^2.6.14 vue-router@^3.5.1 vuex@^3.6.2 core-js@^3.8.3 -S
会遇到安装依赖作用域报错问题:
yarn
进行全局依赖需要加上 -W
这点和后面要讲的 pnpm + monorepo
一致, 安装全局依赖:
yarn add vue@^2.6.14 vue-router@^3.5.1 vuex@^3.6.2 core-js@^3.8.3 -S -W
11、@common/utils 全局提升
yarn add @common/utils -S -W
终端报错:
尝试使用 lerna 方式进行安装:
lerna add @common/utils
我们希望安装的是本地的 @common/utils
工具包,直接yarn
即可
yarn
node_module中
12、lerna 启动项目
确保 system
项目中的package.json
属性scripts
有serve
命令
lerna run serve --scope=system
项目启动成功:
项目打包
lerna run build --scope=system
同时打包system
和 demo-vue2
lerna run build
至此,项目全局依赖提升完毕
二、qinakun 项目下 lerna 坑
1、qiankun + nginx 应用下
qiankun
项目中,通过监听本地ip
端口运行不同服务,此时启动项目
使用 lerna run
启动了system
项目
lerna run serve --scope=system
再启动demo-vue2
项目
lerna run serve --scope=demo-vue2
假设system
遇到报错,我们尝试关闭服务:
再次启动 system
,我们希望默认在8080端口打开,但是demo-vue2
的8081
在运行,而vue-cli
会对port
进行累加分配,此时启动的system
服务端口被分配8082
端口
而qiankun
微服务在nginx
监听的是 8080
端口,最终导致服务一直报错
2、排查问题
使用当前命令查看 8080
端口是否启动
netstat -aon | findstr 8080
终端打印以下内容:
netstat -aon | findstr 8080
TCP 0.0.0.0:8601 0.0.0.0:0 LISTENING 11216
关闭当前端口,需要用到上面的 11216
关闭端口占用
taskkill /f /pid 11216
3、qiankun项目下推荐
验证了端口占用之后,我改回了项目启动方式
cd packages/system
启动项目
npm run serve
4、总结
如果不是 qiankun
项目问题不大,下期内容集成 qiankun
三、Lerna速查手册
转载自:https://juejin.cn/post/7407701153158610954