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

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

组件库发布

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

因涉及一些执行语句，禁止写入，请联系客服获取

解释一下其中的几个字段

• main

组件库入口文件

• module

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

• files

发布到 npm 上的文件目录

• sideEffects

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

因涉及一些执行语句，禁止写入，请联系客服获取

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

• typings

声明文件入口

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

自动发布

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

首先全局安装release-it

因涉及一些执行语句，禁止写入，请联系客服获取

然后在打包后文件 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 用于发布任务

因涉及一些执行语句，禁止写入，请联系客服获取

在根目录的 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 实现自动管理发布组件库