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

系列

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

基于 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
)

文章已经结束啦

Postbird

系列

说明