回顾第一篇文章中谈到的组件库的几个方面，只剩下最初的、也是最重要的组件库的打包构建、本地公布、近程公布了。

1 组件库构建

组件库的入口是 packages/yyg-demo-ui，构建组件库有两个步骤：

  1. 增加 TypeScript 的配置文件： tsconfig.json
  2. 增加 vite.config.ts 配置文件，配置打包形式。

1.1 tsconfig.json

在 packages/yyg-demo-ui 中增加 tsconfig.json 文件：

{  "compilerOptions": {    "target": "ESNext",    "useDefineForClassFields": true,    "module": "ESNext",    "moduleResolution": "Node",    "strict": true,    "jsx": "preserve",    "sourceMap": true,    "resolveJsonModule": true,    "isolatedModules": true,    "esModuleInterop": true,    "lib": ["ESNext", "DOM"],    "skipLibCheck": true,    "declaration": true,    "baseUrl": "."  },  "include": ["../**/*.ts", "../**/*.d.ts", "../**/*.tsx", "../**/*.vue"],  "exclude": ["../**/node_modules/"]}

1.2 vite.config.ts

打包构建时须要提取类型定义，能够应用 vite 插件 vite-plugin-dts。首先在 packages/yyg-demo-ui 中增加该插件为开发依赖：

pnpm install vite-plugin-dts -D

而后创立 vite.config.ts 文件：

import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import * as path from 'path'import VueJsx from '@vitejs/plugin-vue-jsx'import viteDts from 'vite-plugin-dts'export default defineConfig({  plugins: [    vue(),    VueJsx(),    viteDts({      insertTypesEntry: true,      staticImport: true,      skipDiagnostics: true    })  ],  build: {    lib: {      entry: path.resolve(__dirname, './index.ts'),      name: 'yyg-demo-ui',      fileName: format => `yyg-demo-ui.${format}.js`    },    outDir: path.resolve(__dirname, '../../lib'),    rollupOptions: {      external: ['vue'],      output: {        globals: {          vue: 'Vue'        }      }    }  }})

1.3 package.json

在 packages/yyg-demo-ui/package.json 中增加打包 scripts，下面的配置指定了打包输入目录为我的项目根目录下的 lib，每次打包前心愿先删除该目录，能够应用 rimraf。在该模块中先装置 rimraf：

pnpm install rimraf -D

在 package.json 中增加 script：

"scripts": {  "build": "rimraf ../../lib && vue-tsc --noEmit && vite build"},

执行 pnpm run build 开始打包。

打包胜利后，我的项目根目录下生成 lib 目录，包含 ES 标准和 UMD 标准和类型定义文件。

2 组件库的本地公布

2.1 根目录 package.json scripts

到目前为止，整个组件库有很多个包，每个包都有一些 scripts：

cli:    - gen: 创立新组件docs：    - dev：本地开发组件库文档    - build：打包构建组件库文档    - serve：预览组件库文档打包example：    - dev:dev、dev:uat、dev:prod：本地开发 example    - build:dev、build:uat、build:prod：打包构建 example    - preview：预览 example 打包构建后的后果packages/yyg-demo-ui:    - build：打包构建组件库

下面这些 scripts 都须要进入到对应的目录执行，这样比拟麻烦，所以能够将这些命令汇总到根目录的 package.json 中，这样无论是哪个模块的 scripts，都从根目录执行即可。

"scripts": {  "dev:dev": "pnpm run -C example dev:dev",  "dev:uat": "pnpm run -C example dev:uat",  "dev:prod": "pnpm run -C example dev:prod",  "build:dev": "pnpm run -C example build:dev",  "build:uat": "pnpm run -C example build:uat",  "build:prod": "pnpm run -C example build:prod",  "preview:example": "pnpm run -C example preview",  "build:lib": "pnpm run -C packages/yyg-admin-ui build",  "docs:dev": "pnpm run -C docs dev",  "docs:build": "pnpm run -C docs build",  "docs:preview": "pnpm run -C docs serve",  "gen:component": "pnpm run -C cli gen",  "lint": "eslint \"{cli,packages,docs,example}/**/*.{js,ts,vue,jsx,tsx}\" --fix"},

通过 -C 指定 scripts 的地位。

2.2 装置本地私服 verdaccio

几个月前程序员优雅哥分享过应用 Docker 搭建 Nexus3 私服，Nexus3 绝对重量级，如果在本地测试，应用 verdaccio 即可，verdaccio 算得上本地的一款轻量级私服了。

  1. 装置 verdaccio

verdaccio 通常是全局装置（-g），在咱们组件库中为了大家 clone 代码操作不便，便将其装置到根目录的开发依赖中：

pnpm install verdaccio -D -w
  1. 启动 verdaccio

在根目录 package.json 的 scripts 中增加启动 verdaccio 的命令

"start:verdaccio": "pnpm verdaccio",

这一步可省略，只因为我用 WebStorm，增加到 scripts中不必每次输出命令，能偷懒的必须偷懒。

执行 start:verdaccio 后，控制台会提醒拜访地址 http://localhost:4873/ 。在浏览器中拜访该门路。

  1. 创立用户、登录

在浏览器中依照界面提醒创立用户、登录。在命令行中执行下列命令创立用户：

npm adduser --registry http://localhost:4873/

顺次输出用户名、明码、邮箱，回车便胜利创立账号并主动登录上。

应用方才输出的用户名和明码，在浏览器中登录，登录前刷新浏览器。

2.3 本地公布

在公布前，须要批改我的项目根目录 package.json 的几个中央：

  1. 增加如下配置，指定 private 为 false、设置 main、module、types、files等属性：
{  ...  "private": false,  "type": "module",  "main": "./lib/yyg-demo-ui.umd.js",  "module": "./lib/yyg-demo-ui.es.js",  "types": "./lib/yyg-demo-ui/index.d.ts",  "files": [    "./lib",    "package.json",    "README.md"  ],  "exports": {    ".": {      "require": "./lib/yyg-demo-ui.umd.js",      "import": "./lib/yyg-demo-ui.es.js"    }  },  ...}
  1. 本人批改 author；
  2. 在 scripts 中增加公布组件库的命令：
"pub:local": "pnpm publish --registry http://localhost:4873/",
  1. 在我的项目根目录下增加一份 README.md 文件。

在公布前，如果代码纳入 git 治理，须要提交代码，再执行 pnpm run pub:local。显示如下信息则公布胜利：

刷新浏览器，能够看到方才公布的组件库。

3 测试应用组件库

3.1 创立新我的项目

应用 vite 或 yyg-cli 创立新的 vue 我的项目：

pnpm create vite

进入新创建的 vue 我的项目，pnpm install 装置依赖，依赖装置胜利后先执行 pnpm run dev 测试项目是否失常运行。

3.2 装置依赖

因为咱们的组件库依赖于 element-plus，故首先装置element-plus：

pnpm install element-plus

因为装置咱本人的组件库须要指定 registry，registry 变了，pnpm 须要从新执行 install：

pnpm install --registry http://localhost:4873/

最初指定 registry 装置咱们的组件库：

pnpm install yyg-demo-ui --registry http://localhost:4873/

3.3 引入组件库

在 main.ts 中引入 element-plus 和 yyg-demo-ui：

...import ElementPlus from 'element-plus'import 'element-plus/dist/index.css'import YygDemoUi from 'yyg-demo-ui'createApp(App)    .use(ElementPlus)    .use(YygDemoUi)    .mount('#app')

在 App.vue 中应用组件库中的 foo 组件：

<yyg-foo msg="测试组件库"></yyg-foo>

启动我的项目，测试运行成果。从浏览器和浏览器 console 中能够看出一切正常。这样组件库便胜利公布了。

4 其余阐明

  1. 公布到 npmjs 与本地公布的操作一样，registry 须要指定为 https://registry.npmjs.org/
  2. 无论是公布到本地还是 npmjs，如果提醒无权限，都能够应用 npm login 先登录：
npm login --registry http://xxxxxx
  1. 再次公布前须要批改版本号。能够应用如下 npm 命令批改版本号：
// 最初一位（patch）版本号加1npm version patch// 两头一位（minor）版本号加1npm version minor// 第一位（major）版本号加1npm version major

组件库的打包构建和公布，咱就聊到这里。

感激浏览本文，如果本文给了你一点点帮忙或者启发，还请三连反对一下，理解更多内容工薇号“程序员优雅哥”。