回顾第一篇文章中谈到的组件库的几个方面,只剩下最初的、也是最重要的组件库的打包构建、本地公布、近程公布了。
1 组件库构建
组件库的入口是 packages/yyg-demo-ui,构建组件库有两个步骤:
- 增加 TypeScript 的配置文件:tsconfig.json
- 增加 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 算得上本地的一款轻量级私服了。
- 装置 verdaccio
verdaccio 通常是全局装置(-g),在咱们组件库中为了大家 clone 代码操作不便,便将其装置到根目录的开发依赖中:
pnpm install verdaccio -D -w
- 启动 verdaccio
在根目录 package.json 的 scripts 中增加启动 verdaccio 的命令
"start:verdaccio": "pnpm verdaccio",
这一步可省略,只因为我用 WebStorm,增加到 scripts 中不必每次输出命令,能偷懒的必须偷懒。
执行 start:verdaccio 后,控制台会提醒拜访地址 http://localhost:4873/。在浏览器中拜访该门路。
- 创立用户、登录
在浏览器中依照界面提醒创立用户、登录。在命令行中执行下列命令创立用户:
npm adduser --registry http://localhost:4873/
顺次输出用户名、明码、邮箱,回车便胜利创立账号并主动登录上。
应用方才输出的用户名和明码,在浏览器中登录,登录前刷新浏览器。
2.3 本地公布
在公布前,须要批改我的项目根目录 package.json 的几个中央:
- 增加如下配置,指定 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"
}
},
...
}
- 本人批改 author;
- 在 scripts 中增加公布组件库的命令:
"pub:local": "pnpm publish --registry http://localhost:4873/",
- 在我的项目根目录下增加一份 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 其余阐明
- 公布到 npmjs 与本地公布的操作一样,registry 须要指定为 https://registry.npmjs.org/
- 无论是公布到本地还是 npmjs,如果提醒无权限,都能够应用 npm login 先登录:
npm login --registry http://xxxxxx
- 再次公布前须要批改版本号。能够应用如下 npm 命令批改版本号:
// 最初一位(patch)版本号加 1
npm version patch
// 两头一位(minor)版本号加 1
npm version minor
// 第一位(major)版本号加 1
npm version major
组件库的打包构建和公布,咱就聊到这里。
感激浏览本文,如果本文给了你一点点帮忙或者启发,还请三连反对一下,理解更多内容工薇号“程序员优雅哥”。