【架构师（第三篇）】脚手架开发之掌握Lerna操作流程

Lerna简介

Lerna 是一个优化基于 git + npm 的多 package 项目的管理工具

官网

👉👉 Lerna官方网站

解决原生脚手架开发痛点

Package 越多，管理的复杂度越高。

痛点一:重复操作

• 多 Package 本地 link
• 多 Package 依赖安装
• 多 Package 单元测试
• 多 Package 代码提交
• 多 Package 代码发布

痛点二:版本一致性

• 发布时版本一致性
• 发布后相互依赖版本升级

优点

Lerna 是架构优化的产物，它揭示了一个架构真理：项目复杂度提升后，就需要对项目进行架构优化。架构优化的主要目标往往都是以效能为核心。

• 大幅减少重复操作
• 提升操作的标准化

Lerna 开发脚手架的流程

image.png

基于lerna搭建脚手架框架

创建 npm 组织

进入 npm 官网，点击头像，然后点击 + Add Organization

image.png

输入组织名，然后点击 create 。

image.png

下一步直接点 skip 就行了，忘了截图了。

然后我们就有了一个组织，这样才可以把包发到 npm 上并且不用担心命名重复的问题

image.png

脚手架项目初始化

新建目录 /imoc-cli-deve/imoc-cli-deve

初始化仓库

npm init -y

全局安装 lerna

npm i -D lerna
npm i -g lerna

查看版本

lerna -v

如何正常显示版本就可以用了

然后当我执行 lerna init 的时候，出现了下面的错误。

image.png

查阅资料，最终的解决方案是不要使用 cmd 去执行，使用 git bash 去执行就可以了。

image.png

现在的目录结构应该是这样

imoc-cli-deve
  packages/
  package.json
  lerna.json

learn 自动给我们生成了一个 lerna.json 文件，以及一个 packages 目录

// lerna.json
{
  "packages": [
    "packages/*"
  ],
  "version": "1.0.0" // 修改一下版本
}

然后我们根目录下手动创建一个 .gitignore 文件

// .gitignore
.history
.vscode
node_modules
packages/**/node_modules
lerna-debug.log

创建 package

通过下面命令创建一个可以被 lerna 管理的 package

lerna create <name>

执行完会让你输入一些东西，修改一下包名和描述即可，其他的直接回车跳过，后面会手动改。

image.png

lerna 会自动在 package 目录下生成下面这些东西

└── packages
   └── core
      ├── lib
      |  └── core.js
      ├── package.json
      ├── README.md
      └── __tests__
         └── core.test.js

以同样的方式再创建一个 utils 包存放一些工具

给 package 安装依赖

通过下面的命令给指定的 package 安装依赖

lerna add <package> [loc]

如果不指定 package ，那么就会给所有的包同时安装依赖

通过下面的命令清空安装的依赖

lerna clean 

通过下面的命令重装依赖

lerna bootstrap 

下面命令是给 packages/core 这个 package 安装 @imooc-cli/utils 这个依赖

lerna add @imooc-cli/utils packages/core/

lerna link

以下命令用来将所有 lerna 管理的 package 进行相互 link

lerna link

修改 packages/core 中的依赖，添加 @imoc-cli-deve/utils

// package.json
  "dependencies": {
    "@imoc-cli-deve/utils": "^1.0.0"
  }

然后执行 lerna link 命令

image.png

这个时候我们查看 packages/core 下的 node_modules 中的 utils 包，会发现有个小箭头，就说明 link 成功了。

image.png

lerna exec

以下命令用来给所有 lerna 管理的 package 执行 command

lerna exec -- <command>

下面是删除所有 package 中的 node_modules 文件夹

lerna exec -- rm -rf node_modules

image.png

下面是删除指定包 @imoc-cli-deve/core 下的 node_modules 文件夹

lerna exec --scope @imoc-cli-deve/core -- rm -rf node_modules

lerna run

以下命令用来给所有 lerna 管理的 package 执行一个 npm 脚本(如果存在的话)，就是 package.json 中 scripts 属性中的内容。

lerna run <script>

下面是执行所有 package 中的 test 脚本

lerna run test

image.png

下面是执行指定包 @imoc-cli-deve/core 中的 test 脚本

lerna run --scope @imoc-cli-deve/core test

脚手架发布上线

以下命令用来查看自上次发布后，哪些 lerna 管理的 package 发生了变更

lerna changed

image.png

另外两个命令需要我们先提交代码

git add .
git commit -m "lerna"

以下命令用来查看自上次发布后，哪些 lerna 管理的 package 的内容发生了变更

lerna diff

image.png

在 gitee 上新建一个代码仓库

然后执行以下指令连接远程仓库

git remote add origin https://gitee.com/hzw_0174/imoc-cli-deve.git // 连接远程仓库
git remote -v // 查看连接状态
git push origin master --set-upstream  // 设置默认分支推送代码

以下命令用来升级 lerna 管理的 package 的版本

lerna diff

通常情况下我们只需要 Patch Minor Major 当中进行选择。

image.png

以下命令用来发布 lerna 管理的 package 到 npm 仓库。

lerna publish

image.png

也是会让你选择版本，如果你没有执行过 lerna version ，然后我们选择第一个，输入 y

image.png

发现最后报了一个错误

lerna ERR! E402 You must sign up for private packages

是因为没有登录，执行 npm login ，输入用户名密码登录

然后在 core 这个 package 里面添加 bin/index 文件，修改 package.json

// bin/index
#! /usr/bin/env node
console.log('hello imoc-cli')

// package.json
 "bin": {
    "imoc-cli-deve": "bin/index.js"
  },

然后修改所有 package 的 package.json

// package.json
  "publishConfig": {
    "registry": "https://registry.npmjs.org/",
    "access": "public"
  },

最后把所有 package.json 和 lerna.json 的版本号统一到最新版本，这是因为虽然我们之前的几次操作发不到 npm 失败了，但是 gitee 仓库已经打上 tag 了，再次发布就会报错。

然后再次执行 lerna publish

image.png

会显示成功推送两个包，然后去 npm 官网上看一下是否成功了

image.png

可以看到已经存在了，并且版本都是 1.0.4 ， 到这里一个完整的 lerna 发布流程就结束了。