系列

因为内容太多，文章分开写的，目录如下：

• 基于 lerna 的多包项目建设与npm & unpkg 的发布（一）

  • 主要介绍 lerna 的基本使用及相关命令实践

• 基于 lerna 的多包项目建设与npm & unpkg 的发布（二）

  • 主要介绍如何基于 lerna 进行 npm 多包发布和版本更新

说明

上一篇文章主要讲了lerna 如何管理多包的本地项目，使用 lerna 需要记住一个核心点：lerna 本身不参与项目的构建

对 lerna 来说，项目的 packages 如何构建是由项目自己决定的，它只是能够进行统一的命令执行及依赖管理等工作。

基于 lerna 发布多个 npm package

前提

发布 npm package ：

• 确保源在 https://registry.npmjs.org/，如果是淘宝的源，需要切换回来

  • 推荐 nrm：https://www.npmjs.com/package/nrm
• npm 注册一个账号，配置好 package.json 即可
• 本地需要 npm add user 保证用户在登录状态

更多关于 npm 的发布可以看：https://segmentfault.com/a/1190000017461666

package的构建

package 的信息

包的构建本身是由各个 package 自己控制，lerna 只负责统一执行构建命令（如：npm run build）0和发布命令（如：npm run publish）

这里为了演示，使用 babel-cli 进行简单的包的构建，将 ES 包构建成 umd 包。

babel-cli 构建命令示例：

"build": "babel src --out-dir dist",

如果要构建 UMD 包，可以配置 .babelrc：

{
    "presets": ["@babel/preset-env"],
    "plugins": ["@babel/plugin-transform-modules-umd"]
}

项目结构：

package.json 主要信息：

main：

"main": "dist/index.js" // 最终导出都是 UMD Package

scripts:

"scripts": {
    "test": "node __tests__/index.test.js",
    "build": "babel --m=umd src --out-dir dist",
    "publish": "yarn build && npm publish"
}

基于 lerna 的统一构建

运行命令：

lerna run build

运行结果：

$ lerna run build
info cli using local version of lerna
lerna notice cli v3.22.1
lerna info Executing command in 3 packages: "yarn run build"
lerna info run Ran npm script 'build' in '@plui/component-button' in 2.1s:
yarn run v1.22.10
$ babel src --out-dir dist
Successfully compiled 1 file with Babel (1111ms).
Done in 1.70s.

构建结果 UMD：

(function (global, factory) {
  if (typeof define === "function" && define.amd) {
    define(["exports"], factory);
  } else if (typeof exports !== "undefined") {
    factory(exports);
  } else {
    var mod = {
      exports: {}
    };
    factory(mod.exports);
    global.index = mod.exports;
  }
})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports) {
  "use strict";

  Object.defineProperty(_exports, "__esModule", {
    value: true
  });
  _exports["default"] = builderCore;

  function builderCore() {// TODO
  }
});

统一版本控制

【不推荐】基于 npm 的版本控制

这里只是说明下 npm version 的控制

下面是三个简单的命令，是对 npm version 的应用，通过 lerna exec 统一控制和升级版本号

"version:patch": "lerna exec -- npm verison patch",
"version:major": "lerna exec -- npm verison major",
"version:minor": "lerna exec -- npm verison minor"

执行结果

$ yarn run version:patch
yarn run v1.22.10
$ lerna exec -- npm verison patch
lerna notice cli v3.22.1
lerna info Executing command in 3 packages: "npm verison patch"
v0.0.5
v0.0.5
v0.0.5
lerna success exec Executed command in 3 packages: "npm verison patch"
Done in 3.40s.

lerna version 统一控制版本号

关于 lerna version 可以看：[https://github.com/lerna/lerna/tree/main/commands/version#readme](https://github.com/lerna/lerna/tree/main/commands/version#readme
)

lerna version 提供了统一的版本控制工具，非常方便的是除了控制版本的变化，能够自动打 tag 并且合并分支，push 到远程分支。

控制版本变化并自动打 tag & push 分支

前提：

• 项目相比于上一次版本有改动（会进行 diff，如果没有改动不会触发新版本）
• 改动都已经 commit

下面执行 lerna version patch 之后，可以发现，自动更新版本号并且 push 了分支，同时有了 tag

$ lerna version patch
info cli using local version of lerna
lerna notice cli v3.22.1
lerna info current version 0.0.6
lerna info Looking for changed packages since v0.0.6

Changes:
 - @ptlui/builder-core: 0.0.6 => 0.0.7
 - @ptlui/component-button: 0.0.6 => 0.0.7
 - @ptlui/component-input: 0.0.6 => 0.0.7

? Are you sure you want to create these versions? Yes
lerna info execute Skipping releases
lerna info git Pushing tags...
lerna success version finished

npm 包发布

【不推荐】使用 npm publish 发布

说明：因为我使用 scope 发布，因此在 npm 我创建了一个 organization：https://www.npmjs.com/org/ptlui

这里只是为了说明下，lerna 项目不应该使用这种方式发布

如果一个 npm 要发布，我们会使用 npm publish 发布命令，在 lerna 项目中如果还是使用 npm publish 发布，可以通过 run command 来给所有的包执行发布命令。

运行命令

先构建出结果，然后触发发布

lerna run build
lerna run publish

发布结果

https://www.npmjs.com/search?q=%40ptlui

使用 lerna 发布 package 版本

使用 lerna publish 能够同时选择版本然后执行 npm publish。

注意每个包的 package.json 中不需要写 scripts: publish ，lerna 自动完成即可。

下面是一次 lerna publish 的执行过程

$ lerna publish
info cli using local version of lerna
lerna notice cli v3.22.1
lerna info current version 0.0.9
lerna info Looking for changed packages since v0.0.9
? Select a new version (currently 0.0.9) Patch (0.0.10)

Changes:
 - @ptlui/builder-core: 0.0.9 => 0.0.10
 - @ptlui/component-button: 0.0.9 => 0.0.10
 - @ptlui/component-input: 0.0.9 => 0.0.10

? Are you sure you want to publish these packages? Yes
lerna info execute Skipping releases
lerna info git Pushing tags...
lerna info publish Publishing packages to npm...

发布结果：

代码仓库示例：

• [https://github.com/postbird/lerna-app-project](https://github.com/postbird/lerna-app-project
  )