回顾第一篇提到的组件库的几个方面，只剩下最后也是最重要的组件库打包构建，本地发布，和远程发布。1组件库构建组件库的入口是packages/yyg-demo-ui。构建组件库分两步：添加TypeScript配置文件：tsconfig.json添加vite.config.ts配置文件，配置打包方式。1.1tsconfig.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":"."},"包括":["../**/*.ts","../**/*.d.ts","../**/*.tsx","../**/*.vue"],"exclude":["../**/node_modules/"]}1.2vite.config.ts打包构建时需要提取类型定义，可以使用vite插件vite-插件-dts。首先在packages/yyg-demo-ui中添加插件作为开发依赖：pnpminstallvite-plugin-dts-D然后创建一个vite.config.ts文件：import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'import*aspathfrom'path'importVueJsxfrom'@vitejs/plugin-vue-jsx'importviteDtsfrom'vite-plugin-dts'exportdefaultdefineConfig({plugins:[vue(),VueJsx(),viteDts({insertTypesEntry:true,staticImport:true,skipDiagnostics:true})],build:{lib:{entry:path.resolve(__dirname,'./index.ts'),名称:'yyg-demo-ui',fileName:format=>`yyg-demo-ui.${format}.js`},outDir:path.resolve(__dirname,'../../lib'),rollupOptions:{外部:['vue'],output:{globals:{vue:'Vue'}}}}})1.3package.json在packages/yyg-demo-ui/package.json中添加打包脚本，上述配置指定打包输出目录为项目根目录下的lib，如果想在每次打包前删除该目录，可以使用rimraf。首先在这个模块中安装rimraf：pnpminstallrimraf-D在package.json中添加脚本："scripts":{"build":"rimraf../../lib&&vue-tsc--noEmit&&vitebuild"},执行pnpmrunbuild开始打包。打包成功后，会在项目根目录下生成一个lib目录，包含ES规范和UMD规范及类型定义文件。2组件库本地发布2.1根目录package.json脚本至此，整个组件库有很多包，每个包都有一些脚本：cli:-gen:新建组件docs:-dev:本地开发组件库文档-build:packagebuildcomponentlibrarydocument-serve:preview组件库文档packageexample:-dev:dev,dev:uat,dev:prod:localdevelopmentexample-build:dev,build:uat,build:prod:packagebuildexample-preview:examplepackages/yyg-demo-ui中预览打包构建后的结果:-build:打包构建组件库中的上述脚本需要进入对应目录执行，比较麻烦，可以总结一下这些命令到根目录的package.json中，不管是哪个模块的脚本，都可以从根目录执行。"scripts":{"dev:dev":"pnpmrun-Cexampledev:dev","dev:uat":"pnpmrun-Cexampledev:uat","dev:prod":"pnpmrun-Cexampledev:prod","build:dev":"pnpmrun-Cexamplebuild:dev","build:uat":"pnpmrun-Cexamplebuild:uat","build:prod":"pnpmrun-C示例build:prod","preview:example":"pnpmrun-Cexamplepreview","build:lib":"pnpmrun-Cpackages/yyg-admin-uibuild","docs:dev":"pnpmrun-Cdocsdev","docs:build":"pnpmrun-Cdocsbuild","docs:preview":"pnpmrun-Cdocsserve","gen:component":"pnpmrun-Ccligen","lint":"eslint\"{cli,packages,docs,example}/**/*.{js,ts,vue,jsx,tsx}\"--fix"},通过-C指定脚本的位置。2.2安装本地私服verdaccio几个月前，程序员Yaya分享了如何使用Docker搭建Nexus3私服。Nexus3是比较重量级的。如果你在本地测试它，你可以使用verdaccio。Verdaccio可以看作是一个本地的轻量级私服。安装verdaccioverdaccio通常是全局安装(-g)。在我们的组件库中，为了方便clone代码操作，安装在根目录的开发依赖中：pnpminstallverdaccio-D-w在根目录package.json中启动verdaccio添加命令“start:verdaccio”：“pnpmverdaccio”到脚本以启动verdaccio。这一步可以省略，因为我用的是WebStorm，不用每次在脚本中都输入命令。能懒，就一定要懒。执行start:verdaccio后，控制台会提示访问地址http://localhost:4873/。在浏览器中访问该路径。创建用户并登录按照界面提示在浏览器中创建用户并登录。在命令行执行以下命令创建用户：npmadduser--registryhttp://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"}},...}自己修改作者；在脚本中添加发布组件库的命令："pub:local":"pnpmpublish--registryhttp://localhost:4873/"，在项目根目录添加README.md文件。发布前，如果代码被git管理，需要提交代码，然后执行pnpmrunpub:local。出现如下信息表示发布成功：刷新浏览器，可以看到刚刚发布的组件库。3使用组件库进行测试3.1新建工程使用vite或者yyg-cli新建vue工程：pnpmcreatevite进入新建的vue工程，pnpminstall安装依赖，依赖安装成功后，先执行pnpmrundev来测试项目是否正常运行。3.2安装依赖由于我们的组件库依赖于element-plus，所以先安装element-plus：pnpminstallelement-plus由于我们安装自己的组件库需要指定一个registry，registry发生了变化，需要重新执行pnpm安装：pnpminstall--registryhttp://localhost:4873/最后指定registry来安装我们的组件库：pnpminstallyyg-demo-ui--registryhttp://localhost:4873/3.3导入组件库引入element-plus在main.ts和yyg-demo-ui中：...从'element-plus'导入ElementPlus导入'element-plus/dist/index.css'从'yyg-demo-ui'createApp(App).use（元素加）。use(YygDemoUi).mount('#app')在App.vue中使用组件库中的foo组件：
