从0搭建Vue3组件库(八):使用 release-it 实现自动管理发布组件库

使用 release-it 实现自动管理发布组件库

上一篇文章已经打包好我们的组件库了,而本篇文章将介绍如何发布一个组件库。当然本篇文章介绍的肯定不单单只是发布那么简单。

组件库发布

我们要发布的包名为打包后的 easyest,因此在 easyest 下执行pnpm init生成package.json

{
  "name": "easyest",
  "version": "1.0.0",
  "main": "lib/index.js",
  "module": "es/index.mjs",
  "files": [
    "es",
    "lib"
  ],
  "keywords": [
    "easyest",
    "Vue3组件库"
  ],
  "sideEffects": [
    "**/*.CSS"
  ],
  "author": "小月",
  "license": "MIT",
  "description": "",
  "typings": "lib/index.d.ts",
}

解释一下其中的几个字段

main

组件库入口文件

module

如果使用组件库的环境支持 esmodule 则入口文件变成这个字段

files

发布到 npm 上的文件目录

sideEffects

忽略 tree shaking 带来副作用的代码,比如打包后组件代码中包含了

import "./xxx.css"

这样会使得构建工具无法知道这段代码是否有副作用(也就是会不会用到其它引入的文件中的代码),所以构建的时候就会全量打包代码从而失去 esmodule 的自动按需引入功能。因此加上 sideEffects 字段就可以告诉构建工具这段代码不会产生副作用,可以放心的 tree shaking

typings

声明文件入口

然后在打包目录下执行pnpm publish,注意此时会让你登录 npm 账户,如果没有的话直接去官网注册即可,发布之前要将代码提交到仓库或者加上后缀pnpm publish --no-Git-checks即可,登录 npm 即可看到自己刚刚发布的包

从0搭建Vue3组件库(八):使用 release-it 实现自动管理发布组件库 — image.png

自动发布

上面的发布每次更新我们需要手动去提升版本,手动去打 tag 等,非常不方便,接下来我们将使用release-it来管理这些

首先全局安装release-it

pnpm add release-it -D -w

然后在打包后文件 easyest 下的 package.json 中加入 script 脚本以及 git 仓库地址

{
  "name": "easyest",
  "version": "1.0.1",
  "main": "lib/index.js",
  "module": "es/index.mjs",
  "files": [
    "es",
    "lib"
  ],
  "keywords": [
    "easyest",
    "vue3组件库"
  ],
  "sideEffects": [
    "**/*.css"
  ],
  "author": "小月",
  "license": "MIT",
  "description": "",
  "typings": "lib/index.d.ts",
    "scripts": {
    "release": "release-it"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/qddidi/easyest"
  }
}

在 script 目录下新建 publish/index.ts 用于发布任务

import run from "../utils/run";
import { pkgPath } from "../utils/paths";
import { series } from "gulp";
export const publishComponent = async () => {
  run("release-it", `${pkgPath}/easyest`);
};
export default series(async () => publishComponent());

在根目录的 package.json 文件中新增 scripts 命令 gulp 执行 publish/index.ts

  "scripts": {
    "build:easyest": "gulp -f packages/components/script/build/index.ts",
    "publish:easyest": "gulp -f packages/components/script/publish/index.ts"
  },

然后将我们的改动提交后执行pnpm run publish:easyest,就会发现他让我们选择如何提升版本,是否发布,是否加个tag等等

选择完之后我们的组件库就发布成功了,并且github上也成功加上了一个tag

本篇文章代码地址使用 release-it 实现自动管理发布组件库^[1]

参考资料

[1]

https://github.com/qddidi/easyest/commit/fc2a587505cc449d4387670623b2d4a9c7cb3dc1: https://github.com/qddidi/easyest/commit/fc2a587505cc449d4387670623b2d4a9c7cb3dc1