Build Vue3 component library from 0 (eight): use release-it to realize automatic management and release of component library

Use release-it to automatically manage the release component library

The previous article has packaged our component library, and this article will introduce how to publish a component library. Of course, what this article introduces is definitely not just as simple as publishing.

Component library released

pnpm initThe package we want to publish is named easyest after packaging, so the generation is performed under easyestpackage.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",
}

Explain a few of the fields

main

Component library entry file

module

If the environment using the component library supports esmodule, the entry file becomes this field

files

Publish to file directory on npm

sideEffects

Ignore the code that has side effects caused by tree shaking, such as the packaged component code contains

import "./xxx.css"

This will make the build tool unable to know whether this code has side effects (that is, whether the code in other imported files will be used), so when building, it will fully package the code and lose the automatic on-demand import function of esmodule. Therefore, adding the sideEffects field can tell the build tool that this code will not produce side effects, and you can rest assured that tree shaking

typings

Declare the file entry
and execute pnpm publish in the packaging directory. Note that you will be logged into the npm account at this time. If not, you can go to the official website to register. Before publishing, you must submit the code to the warehouse or add the suffix pnpm publish --no- Just git-checks, log in to npm to see the package you just released
insert image description here

auto-publish

Every time the above release is updated, we need to manually upgrade the version, manually tag, etc., which is very inconvenient. Next, we will use release-it to manage these

First install globallyrelease-it

pnpm add release-it -D -w

Then add the script script and the git warehouse address to the package.json under the packaged file easyest

{
    
    
  "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"
  }
}

Create a new publish/index.ts in the script directory for publishing tasks

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());

Add scripts command gulp to execute publish/index.ts in the package.json file in the root directory

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

Then submit our changes and execute them pnpm run publish:easyest, and we will find that he lets us choose how to upgrade the version, whether to publish, whether to add a tag, etc. insert image description here
After the selection, our component library is successfully released, and a github is also successfully added tag

insert image description here