这是我参与11月更文挑战的第27天，活动详情查看：2021最后一次更文挑战

前端架构师必备脚手架小知识(三)

• 原生脚手架开发痛点分析
• Lerna简介及脚手架开发流程
• 实战: 基于lerna搭建脚手架框架
• Lerna核心操作
• lerna发布流程

原生脚手架开发痛点分析

Lerna 解决的问题

• 痛点一: 重复操作

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

• 痛点二: 版本一致性

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

  package越多,管理复杂度越高

Lerna 简介

Lerna 是一个管理工具，用于管理包含多个软件包（package）的 JavaScript 项目。

Lerna 是一种工具，针对 使用 git 和 npm 管理多软件包代码仓库的工作流程进行优化

www.lernajs.cn/

优势

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

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

案例

使用 Lerna 管理的大象项目:

• babel: github.com/babel/babel
• vue-cli: github.com/vuejs/vue-c…
• create-react-app: github.com/facebook/cr…

Lerna 开发脚手架流程☆

基于 Lerna 搭建脚手架框架

$ mkdir colion-cli-dev && cd colion-cli-dev
$ npm init -y
$ npm install lerna -D
$ npm install lerna -g # 推荐全局安装
$ lerna -v # 查看 lerna 版本号
4.0.0
$ lerna init # lerna 初始化
info cli using local version of lerna
lerna notice cli v3.22.1
lerna info Initializing Git repository
lerna info Updating package.json
lerna info Creating lerna.json
lerna info Creating packages directory
lerna success Initialized Lerna files
$ tree -I "node_modules" >README.md # 查看初始化后的目录结构并保存在README.md
├── README.md
├── README.mdtree
├── lerna.json
├── package-lock.json
├── package.json
└── packages # 存放 子 package 的目录
$ touch .gitignore

# .gitignore
.vscode
.idea
.histroy
node_modules
packages/**/node_modules
package-lock.json

@lerna/create

创建一个被 lerna 管理的 package

Usage

lerna create <name> [loc]
# name package-name
# loc 指定路径, 可不写

创建核心包 core

$ lerna create core
package name: (core) @colion-cli-dev/core
version: (0.0.0) 1.0.0
$ tree -I "node_modules"
.
├── README.md
├── README.mdtree
├── lerna.json
├── package-lock.json
├── package.json
└── packages
    └── core # CORE 核心包
        ├── README.md
        ├── __tests__
        │   └── core.test.js
        └── lib
            └── core.js

创建工具包 utils

$ lerna create utils
package name: (utils) @colion-cli-dev/utils
version: (0.0.0) 1.0.0

创建 @colion-cli-dev 组织

注册成功

Lerna 核心操作

Lerna add

Add a dependency to matched packages

对指定的 packages 安装相关的依赖

# Usage
$ lerna add <package>[@version] [--dev] [--exact] [--peer]

# 向特定的package 安装依赖
$ lerna clean # 清空依赖
info cli using local version of lerna
lerna notice cli v3.22.1
lerna info Removing the following directories:
lerna info clean packages/core/node_modules
lerna info clean packages/utils/node_modules
? Proceed? (ynH) y
>> Yes
lerna info clean removing /Users/pm/colion-cli/colion-cli-dev/packages/core/node_modules
lerna info clean removing /Users/pm/colion-cli/colion-cli-dev/packages/utils/node_modules
lerna success clean finished
$ lerna add lodash packages/core/ # 仅在 core包中添加依赖

$ lerna add -h
lerna add <pkg> [globs..]

Add a single dependency to matched packages
...
Examples:
  lerna add module-1 packages/prefix-*        Adds the module-1 package to the packages in the 'prefix-' prefixed
                                              folders
  lerna add module-1 --scope=module-2         Install module-1 to module-2
  lerna add module-1 --scope=module-2 --dev   Install module-1 to module-2 in devDependencies
  lerna add module-1 --scope=module-2 --peer  Install module-1 to module-2 in peerDependencies
  lerna add module-1                          Install module-1 in all modules except module-1
  lerna add module-1 --no-bootstrap           Skip automatic `lerna bootstrap`
  lerna add babel-core                        Install babel-core in all module

重点看 examples示例

lerna link

将所有lerna管理的package下面的相互依赖进行link

lerna exec

执行 command 在所有的package下面

$ lerna exec -- <command> [...args] # runs the command in all packages
# Example
$ lerna exec -- rm -rf node_modules/  # 删除 packages下面的所有 node_modules
$ lerna exec --scope utils -- rm -rf node_modules/ # 指定scope

lerna bootstrap

在当前 Lerna 仓库中执行引导流程（bootstrap）。安装所有 依赖项并链接任何交叉依赖。

此命令至关重要，因为它让你可以 在 require() 中直接通过软件包的名称进行加载，就好像此软件包已经存在于 你的 node_modules 目录下一样。

lerna run [script\]

在每一个包含 [script] 脚本的软件包中运行此 npm 脚本。

$ lerna run test
# packages 下面所有包的 npm run test 脚本都会执行
$ lerna run --scope @colion-cli-dev/utils test 
# 执行执行包的 npm 脚本命令

Lerna 发布流程

lerna version

lerna changed

lerna diff

# 代码提交
$ git add .
$ git commit -m"init"
# 查看版本号
$ lerna version
info cli using local version of lerna
lerna notice cli v3.22.1
lerna info current version 0.0.0
lerna ERR! ENOREMOTEBRANCH Branch 'master' doesn't exist in remote 'origin'.
lerna ERR! ENOREMOTEBRANCH If this is a new branch, please make sure you push it to the remote first.
$ lerna diff
info cli using local version of lerna
lerna notice cli v3.22.1
# 修改任意文件, 再执行lerna diff 就会显示本次改动了哪些地方
$ lerna diff
info cli using local version of lerna
lerna notice cli v3.22.1
diff --git a/packages/core/lib/core.js b/packages/core/lib/core.js
index 3bffcf4..e817153 100644
--- a/packages/core/lib/core.js
+++ b/packages/core/lib/core.js
@@ -3,5 +3,6 @@
 module.exports = core;
 
 function core() {
-    // TODO
+  // TODO
+  // CODE
}
# 关联远程仓库
$ git remote add origin git@gitlab.ops.colion.cn:open/colion-cli-dev.git
# 查看远程仓库
$ git remote -v
# 推送到远程 master 分支 并设置为默认选项
$ git push --set-upstream origin master
# 登录 npm
$ npm login
# 发布
$ lerna publish
info cli using local version of lerna
lerna notice cli v3.22.1
lerna info current version 0.0.2
lerna notice Current HEAD is already released, skipping change detection.
lerna success No changed packages to publish 

lerna ERR! E402 You must sign up for private packages
# 解决方法
$ touch LICENSE.md
# 修改package.json
# 增加 
"publishConfig": {
    "access": "public"
}
Successfully published:
 - @colion-cli-dev/core@0.0.5
 - @colion-cli-dev/utils@0.0.5