系列

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

说明

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

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

基于 lerna 发布多个 npm package

前提

发布 npm package :

更多关于 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"]
}

项目结构:
29537-fhxll64wehb.png

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

10463-k769r4qwgw.png

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

96755-jittkkz0lz9.png

使用 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...

发布结果:

24989-rab6jbfdaua.png

代码仓库示例:

文章已经结束啦