基于 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/,如果是淘宝的源,需要切换回来
- 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...
发布结果:
代码仓库示例:
文章版权:Postbird-There I am , in the world more exciting!
本文链接:http://www.ptbird.cn/lerna-packages-project-npm-unpkg.html
转载请注明文章原始出处 !
涨知识啊,学习了