likes
comments
collection
share

lerna + yarn workspace 入门今日话题 使用 lerna 和 yarn workspace 方式搭建

作者站长头像
站长
· 阅读数 3

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

终端执行结果如下:

lerna + yarn workspace 入门今日话题 使用 lerna 和 yarn workspace 方式搭建

此时的目录结构如下:

.
├─ demo-lerna
│  ├─ packages
│  ├─ package.json
│  └─ lerna.json

lerna + yarn workspace 入门今日话题 使用 lerna 和 yarn workspace 方式搭建

4、使用 lerna 创建包

通过 lerna create 命令可以创建一个 utils 的 commonjs 的模块包

lerna create utils

lerna + yarn workspace 入门今日话题 使用 lerna 和 yarn workspace 方式搭建

现在使用的模块化 esModule 偏多,对 utils 改造如下:

lerna + yarn workspace 入门今日话题 使用 lerna 和 yarn workspace 方式搭建

调整 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

目录结构如下:

lerna + yarn workspace 入门今日话题 使用 lerna 和 yarn workspace 方式搭建

6、改造 utils 包

一般真实项目中,希望工具函数包和项目文件夹能够区分开,具体改造如下:

  • common 用作公共包 (文件夹结构可自行设计)
  • packages 用作项目包 (文件夹结构可自行设计)

lerna + yarn workspace 入门今日话题 使用 lerna 和 yarn workspace 方式搭建

根目录 package.json 文件改造如下:

{
  "name": "root",
  "private": true,
  "workspaces": [
    "packages/*",
    "common/*"
  ],
  "devDependencies": {
    "lerna": "^6.0.0"
  }
}

调整 utils 中的 package.json

lerna + yarn workspace 入门今日话题 使用 lerna 和 yarn workspace 方式搭建

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 依赖并未下载

lerna + yarn workspace 入门今日话题 使用 lerna 和 yarn workspace 方式搭建

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

控制台输出:

lerna + yarn workspace 入门今日话题 使用 lerna 和 yarn workspace 方式搭建

8、全局依赖提升目标

进入 packages 文件夹

cd packages

基于vue-cli 生成 vue 项目,依旧是 vue2.0项目

vue create system

项目依赖和开发依赖都可提升,以项目依赖:

lerna + yarn workspace 入门今日话题 使用 lerna 和 yarn workspace 方式搭建

改造目标,统一由根目录来维护管理项目中通用依赖:

  "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、全局依赖安装前准备

删除 systemdemo-vue2packages.json文件的项目依赖

  • vue
  • vue-router
  • vuex
  • core-js

lerna + yarn workspace 入门今日话题 使用 lerna 和 yarn workspace 方式搭建

并且手动删除 systemdemo-vue2node_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

会遇到安装依赖作用域报错问题:

lerna + yarn workspace 入门今日话题 使用 lerna 和 yarn workspace 方式搭建

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 + yarn workspace 入门今日话题 使用 lerna 和 yarn workspace 方式搭建

尝试使用 lerna 方式进行安装:

lerna add @common/utils

我们希望安装的是本地的 @common/utils工具包,直接yarn即可

yarn

node_module中

lerna + yarn workspace 入门今日话题 使用 lerna 和 yarn workspace 方式搭建

12、lerna 启动项目

确保 system 项目中的package.json属性scriptsserve命令

lerna run serve --scope=system

项目启动成功:

lerna + yarn workspace 入门今日话题 使用 lerna 和 yarn workspace 方式搭建

项目打包

lerna run build --scope=system

同时打包systemdemo-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遇到报错,我们尝试关闭服务:

lerna + yarn workspace 入门今日话题 使用 lerna 和 yarn workspace 方式搭建

再次启动 system,我们希望默认在8080端口打开,但是demo-vue28081在运行,而vue-cli会对port进行累加分配,此时启动的system服务端口被分配8082端口

qiankun微服务在nginx监听的是 8080 端口,最终导致服务一直报错

lerna + yarn workspace 入门今日话题 使用 lerna 和 yarn workspace 方式搭建

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
评论
请登录