本文是Varlet组件库源码专题阅读系列的第一篇，所以作为个人重新发明轮子意义不大，但是笔者对如何设计一个Vue组件库还是很感兴趣的。不同的组件库架构肯定是不一样的，但是大体思路应该是差不多的。笔者从众多组件库中挑选了Varlet进行分析。Varlet是基于Vue3开发的Material风格移动端组件库。本系列文章将全面分析这个项目，需要说明的是，我们不会具体看某个组件是如何实现的，而是了解组件库的整体设计，以及按需介绍、主题定制、屏幕适配、组件封装以及VsCode高属性亮等更多有趣的话题，话不多说，开始吧。Varlet版本为：1.27.20项目结构首先克隆Varlet项目：gitclonehttps://github.com/varletjs/varlet.git初始结构如下：packages目录下有很多独立的包，我们稍后会介绍。本地开发根据官方文档的描述，我们可以使用如下命令进行本地开发：Varlet使用的包管理器是pnpm，它是一个速度快、节省磁盘空间的包管理器。如果没有安装，需要先安装：npminstall-gpnpmbootstrap命令如下：pnpminstall&&nodescripts/bootstrap.mjs先安装依赖，然后执行bootstrap.mjs文件：//bootstrap.mjsimport{buildCli,buildIcons,buildShared,buildUI,runTask}from'./build.mjs';(async()=>{awaitrunTask('shared',buildShared)awaitPromise.all([runTask('cli',buildCli),runTask('icons',buildIcons)])awaitrunTask('ui',buildUI)})()跑了一波任务，我们一一看，先看runTask方法：//build.mjsimportorafrom'ora'exportasyncfunctionrunTask(taskName,task){consts=ora().start(`Building${taskName}`)try{awaittask()s.succeed(`Build${taskName}completed!`)}catch(e){s.fail(`Build${taskName}failed!`)console.error(e.toString())}}ora是一个命令行加载工具，可以在终端显示漂亮的加载效果，然后执行传入的任务函数。sharedtask://build.mjsimportexecafrom'execa'import{resolve}from'path'constCWD=process.cwd()//获取nodejs进程的当前工作目录，也就是项目的根目录constPKG_SHARED=resolve(CWD,'./packages/varlet-shared')//varlet-shared包的绝对路径exportconstbuildShared=()=>execa('pnpm',['build'],{cwd:PKG_SHARED})execa是nodejs改进版的child_process返回一个Promise。pnpmrun命令可以省略run，直接pnpmbuild。所以，上面的任务就是在varlet-shared包的目录下执行build命令：tsc&&tsc-ptsconfig.cjs.json使用两个配置文件执行两次tsc，即编译src中的ts文件目录分别进入es模块和commonjs模块：clitask://build.mjsconstPKG_CLI=resolve(CWD,'./packages/varlet-cli')exportconstbuildCli=()=>execa('pnpm',['build'],{cwd:PKG_CLI})在varlet-cli目录下执行build命令：tsc同时编译ts，这个包./lib/index.js的入口是./lib/index.js。编译之前，lib目录下只有这个文件。显然，缺少其他文件：您需要先编译才能使用此包。编译后结果如下：iconstask://build.mjsconstPKG_ICONS=resolve(CWD,'./packages/varlet-icons')exportconstbuildIcons=()=>execa('pnpm',['build'],{cwd:PKG_ICONS})进入varlet-icons目录运行构建命令：varlet-iconsbuildvarlet-icons命令的执行文件为同目录下的varlet-icons/lib/index.js。后面会讲到详细的逻辑，先来看看运行结果：其实就是将svg文件编译成字体图标ui任务：//build.mjsconstPKG_UI=resolve(CWD,'./packages/varlet-ui')exportconstbuildUI=(noUmd)=>execa('pnpm',['compile',noUmd?'--noUmd':''],{cwd:PKG_UI})进入varlet-ui目录，执行编译命令。与之前的任务不同，这个任务会接收一个参数。顾名思义，是否生成umd，但是我搜索了一下，没有发现通过true的情况：编译命令如下：varlet-clicompile该命令的作用是打包varlet组件。具体实现逻辑后面会看到。先看运行结果：主要是编译组件。一共有三种产品：es模块、commonjs模块、umd模块。启动前的任务都跑完了，然后就可以进入varlet-ui目录启动服务了，启动命令pnpmdev:varlet-clidev这个命令干了很多事，后面我们会详细讲解，在一般我们会把varlet-cli目录下的site目录复制到varket-ui目录下，动态生成两个路由文件：mobile.routes.ts,pc.routes.ts：访问启动页：报错据悉，原因很简单，作者是Windows电脑，路径分隔符是反斜杠，所以生成的部分路径\没有转换成/，而\和.的组合。路径问题，不知道为什么没有生效：没办法，只能手动修复，我们用下面的方法转换：importpathfrom'path'xxx.split(path.sep).join('/')修改后显示文档页面示例：右侧手机模拟器中的组件是从varlet-ui/src/xxx目录导入的，即下面的组件development目录，这样我们直接向上修改就可以在页面上查看效果了。项目的本地启动部分就到这里了，下篇文章见~
