痛点

同时维护多个前端项目时, 会出现的问题:

  • 仓库地址过多
  • 每个项目都包含独立的node_modules,且都包含babel,webpack等开发依赖，安装耗时冗余占用过多空间
  • 同时开发时，需打开多个终端，容易混淆
  • 代码规范不一致

  • 没有公用的组件库和工具函数库

    Lerna的基础概念

  • Lerna是一个优化基于git + npm的多package项目的管理工具，可以在一个主项目下管理多个子项目，从而解决项目之间相互依赖的问题

    Lerna和传统的代码管理方式对比

  • 多仓库管理：一个仓库地址（一个文件夹）对应一个项目

  • 单仓库管理：一个主项目管理多个子项目

54d073d504fa004bbb61bfe90cdfa3f5.webp

本地调试模块包

  • 需要在被调试模块下执行 npm link
  • 执行pwd 复制被调试模块的文件路径
  • 切换到项目里执行npm link <文件路径>

Lerna环境配置

  • lerna使用之前需要全局安装

    1. npm install lerna -g

    Lerna常用命令

  • lerna init

    • 项目初始化，并且会自动完成git初始化，但不会创建.gitignore文件，需手动添加
  • lerna create <package>
    • 创建package, 注意必须在git bash中才能执行，用vscode终端的话需要把终端改成git bash
  • lerna add <package> [loc] --dev
    • 增加本地或者远程package做为当前项目packages里面的依赖
    • 第一个参数: 添加的npm包名
    • 选项:
      • —dev: 安装开发依赖
    • 默认情况下是给所有package都添加依赖，如果只想给某个package添加依赖，需要lerna add <package> --scope=<依赖的本地包名>
  • lerna clean：
    只会删除node_modules，不会删除package.json中的依赖
  • lerna exec和lerna run：
    --scope属性后添加的是包名，而不是package的路径，这点和lerna add用法不同
  • lerna bootstrap --hoist
    1. // 顶层package.json
    2. {
    3.   "workspaces": [
    4.     "packages/*"
    5. ]
    6. }
  1. // lerna.json, 指定npmClient为yarn
  2. {
  3.     "npmClient": "yarn",
  4.   "useWorkspaces": true
  5. }
  • lerna publish
    • 发布时会自动执行：git add package-lock.json，所以package-lock.json不要加入.gitignore文件
    • 先创建远程仓库，并且同步一次master分支
    • 执行lerna publish前先完成npm login
    • 如果发布的npm包名为：@xxx/yyy的格式，需要先在npm注册名为：xxx的organization，否则可能会提交不成功
    • 发布到npm group时默认为private，所以我们需要手动在package.json中添加如下设置
      1. "publishConfig":{
      2. "access":"public"
      3. }

Lerna应用

  • 初始化项目 lerna init

5a2907ef28b50ce2eb7817ca16be18f8.webp

  1. -packages(项目目录)
  2. -lerna.json(配置文件)
  3. -package.json(工程描述文件)
  • 子项目创建
  • 安装依赖，依赖提升
    • lerna提供了可以将子项目的依赖提升到最顶层的方式，先执行lerna clean删除每个子项目的node_modules, 然后执行lerna bootstrap --hoist
    • lerna bootstrap --hoist会将packages目录下的公共依赖抽离到顶层, 如果存在同一个模块，但版本不一致的情况，默认只会保留使用最多的版本， 使用yarn workspaces可以解决当不同的项目依赖不同的版本号问题
    • yarn workspaces会检查每个子项目里面依赖及其版本，如果版本不一致都会保留到自己的 node_modules 中，只有依赖版本号一致的时候才会提升到顶层
  • 启动子项目

  • 子项目引用公共函数库

    Lerna弊端

  • 和传统的多仓库方式对比，多个项目合在一起会使得传统空间很大，拉取代码会变得很慢

  • 没有配置云构建，当公共模块修改时，依赖的项目可能需要重新打包发布