Building Vue3 Component Library from Scratch #8 Publish

release-it, Automate versioning and package publishing

The previous article has already packaged our component library, and this article will introduce how to publish a component library. Of course, it is not just publishing.

Component Library Release

The package we want to publish is named 'stellarnovaui' after packaging. Therefore, execute 'pnpm init' under 'stellarnovaui' to generate package.json.

{
  "name": "stellarnovaui",
  "version": "1.0.0",
  "main": "lib/index.js",
  "module": "es/index.mjs",
  "files": [
    "es",
    "lib"
  ],
  "keywords": [
    "stellarnovaui",
    "vue3 Component Library"
  ],
  "sideEffects": [
    "**/*.css"
  ],
  "author": "",
  "license": "MIT",
  "description": "",
  "typings": "lib/index.d.ts",
}

Let's explain a few of the fields.

main

Entry file of the component library

module

If the environment supports esmodule, then the entry file use this field.

files

The file directory to be published

sideEffects

When false, it tells webpack that all code has no side effects and can do tree shaking.

If there are side effects in the code and we don't want webpack to perform tree shaking decisively, we can configure 'sideEffects' with an array to inform webpack which files have side effects and should not be tree shaken.

typings

Declaration files

Then execute 'pnpm publish' in directory packages/stellarnovaui. Note that at this point, you will be asked to log in to your npm account. If you don't have one, you can simply register on the official website. Before publishing, you need to submit the code to the repository or add the suffix 'pnpm publish --no-git-checks'. After logging in to npm, you can see the package you just published.

Automate versioning and package publishing

The above publishing process requires us to manually increase the version and manually tag each time we update, which is very inconvenient. Next, we will use 'release-it' to manage these tasks.

To start with, you need to install 'release-it'.

pnpm add release-it -D -w

Next, you need to add a script and the git repository address to the package.json file in directory packages/stellarnovaui.

{
  "name": "stellarnovaui",
  "version": "1.0.2",
  "main": "lib/index.js",
  "module": "es/index.mjs",
  "files": [
    "es",
    "lib"
  ],
  "keywords": [
    "stellarnovaui",
    "Vue 3 Component Library"
  ],
  "sideEffects": [
    "**/*.css"
  ],
  "author": "markliu2013",
  "license": "MIT",
  "description": "",
  "typings": "lib/index.d.ts",
  "repository": {
    "type": "git",
    "url": "https://github.com/markliu2013/stellarnovaui"
  },
  "dependencies": {
    "@stellarnovaui/utils": "^1.0.0"
  }
}

Create index.ts file in the packages/components/script/publish directory for the publishing task.

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

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

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

After committing our changes, execute pnpm run publish:stellarnovaui. You will find it prompts us to choose how to upgrade the version, whether to publish, whether to add a tag, etc."