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速查手册

• xunyidian.com/t/LernaManu…