Document

--- highlight: hopscotch theme: nico --- > 本文为稀土掘金技术社区首发签约文章，14天内禁止转载，14天后未获授权禁止转载，侵权必究！好了，本节内容正式进入开发环节，我们按步骤一边开发，一边对比[element-plus: 🎉 Vue 3 的桌面端组件库](https://gitee.com/element-plus/element-plus?_from=gitee_search)进行开发，了解其从零开始的开发过程，在此之前我们需要统一**Node**版本，统一包管理器： ### 基础环境统一 - Node版本： 14+ - Pnpm版本: 7.13.5 7+ - 编辑器： vscode pnpm下载 ``` npm install pnpm -g ``` ### 基础Monorepo环境建设在**Element-plus**开发初期，也是采用**lerna+yarn**的形式进行的**Monorepo**架构的形式开发的，最后也是变更到了**pnpm**，可见**pnpm**去做这种架构是尤为方便的，好了废话不多说，我们直接进入开发 #### 包名选择与注册在开发这个组件库之前，我们需要为我们的组件库进行一个命名，这里大家自己定义就好，但是因为我们最终会发布到[npmjs仓库](https://www.npmjs.com/),所以我们需要确定这个包并没有被别人已经注册，你可以前往[官网](https://www.npmjs.com/)进行搜索查看有没有被安装，也可以使用**npm**命令进行查看： ``` npm view package-name version ``` 如果返回了版本号表示已经被注册了，如果没有则是会返回404，你就可以进行使用了，但是有部分的名字没被使用也会被告知与已存在的包名相似，这种也无法被使用。还有一种特殊情况，如果你很喜欢这个包名，而又被使用了，例如一些官方的包都是如此，需要的包名可能被占用，那么你可以添加命名空间，比如**cool-ui**被占用，你可可以添加一个命名空间**这样@yourname/cool-ui**进行使用即可。当然了，还有一种极端方式，如果一些人只是为了单纯占用包名，处于长期不更新的状态，那么你就可以向**npm**官方申诉使用xx包名，这一类包会被认为对社区没有价值的包，一般半个月内可以申诉到。本次我们这里使用的包名为**brain-ui**，暂时没有特殊意义...... #### 基础目录架构首先创建我们的文件夹*brain-ui*,和**npm**创建一样，使用`pnpm init`即可，当我们创建完成之后，会得到这样的一个**package.json**: ![001.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3a47a01a08064724890d2d02af89e3eb~tplv-k3u1fbpfcp-watermark.image?) 但是作为我们的根目录，这个项目并不需要发布，我们对他进行简单的改造，将其设置为私有，我们不需要版本，不需要关键字、入口文件等等，改为如下基础配置即可： ``` { "name": "brain-ui", "private": true, "version": "0.0.1", "scripts": { "test": "echo "Error: no test specified" && exit 1" }, "author": "SNine ", "license": "MIT" } ``` 同时协议也改为**MIT**当然这个协议很多种，然后我们需要对**pnpm**进行一些简单的配置，具体的配置文档可以看看[中文文档](https://pnpm.io/zh/),最基础的我们需要在根目录下创建一个**配置.npmrc**文件，参考[此处](https://pnpm.io/zh/npmrc)可以看到，在配置中添加一个： ``` shamefully-hoist = true ``` > 默认情况下，pnpm 创建一个半严格的 `node_modules`，这意味着依赖项可以访问未声明的依赖项，但 `node_modules` 之外的模块不行。通过这种布局，生态系统中的大多数的包都可以正常工作。但是，如果某些工具仅在提升的依赖项位于根目录的 `node_modules` 时才有效，您可以将其设置为 `true` 来为您提升它们。这一步是我们必须要做的，可以参考看看**Elment-plus**，他设置三项，其他两项是非必须的，或是在我们需要的时候再加以说明和添加，我们暂时可以只添加这一项即可，首先我们先下载最基础需要用到的**vue3和typescript**： ``` pnpm install vue@next typescript -D ``` 这一个是我们的本地开发依赖，只需要下载到本地依赖，即可，下载完**typescript**后，我们就在根目录执行: ``` npx tsc --init ``` 这样就可以生成一份**ts的基础配置文件**,我们需要对其调整为我们需要的配置，这里的配置很多，可以参考文档或者直接查看**Element-plus**项目的配置，我们的配置贴在这里： ``` { "compilerOptions": { "module": "ESNext", "declaration": false, "noImplicitAny": false, "removeComments": true, "moduleResolution": "node", "esModuleInterop": true, "target": "es6", "sourceMap": true, "lib": [ "ESNext", "DOM" ], "allowSyntheticDefaultImports": true, "experimentalDecorators": true, "forceConsistentCasingInFileNames": true, "resolveJsonModule": true, "strict": true, "skipLibCheck": true, }, "exclude": [ "node_modules", "**/__tests__", "dist/**" ] } ``` 然后我们开始创建子项目了，在**pnpm**当中，我们要创建**Monorepo**结构需要依赖于一个配置文件**pnpm-workspace.yaml**，我们在根目录下创建它：具体配置信息可以参考[这里的文档](https://pnpm.io/zh/pnpm-workspace_yaml),在配置文件中我们需要什么，哪些下面的项目为我们的子目录（yaml文件类似与json文件，都是为了表示具体的键值对形式的配置），在申明前，我们需要考虑，我们需要哪些子项目，正常来讲我们必要的包含**组件库项目**、**开发时预览项目用于调试**、**开发文档项目（用于最终上线的文档）** 、**公共方法项目（用于抽离公共逻辑）** ,这些我们前期需要用到的项目，参考 **Elemtn-plus** 可以发现，他抽离了更多的项目，在根目录得**package.json**文件当中以@Element-plus/开头得都是一个单独的项目，我们初期先不需要这么多，我们，先创建两个项目，一个**example用于调试预览（对比Elment-plus的是paly）** ，另一个就是相对核心的**packages**文件夹了，基本大部分的开源项目的组件库代码都是放在其中，然后我们又可以在**packages**下面去创建更多的项目，比如**components放置组件**、**theme-chalk放置样式文件**、**contants放置场景**、**utils放置公共文件**，更多文件我们使用再具体来说，此时我们来定义`pnpm-workspace.yaml`文件： ``` packages: - 'packages/**' - example ``` 我们对**example**和**packages**下面的所有文件进行申明，然后进入到**package目录**下去创建我们刚刚说到的文件，创建完成后，此时的目录是： ``` brain-ui ├── .vscode │ └── settings.json ├── example ├── packages │ ├── components │ ├── theme-chalk │ └── utils ├── package.json ├── pnpm-lock.yaml └── pnpm-workspace.yaml ``` 添加完这些文件夹后，我们依次进入，packages/components、packages/theme-chalk、packages/utils里执行**pnpm init**进行项目初始化，拿utils举例，我们生成的文件需要做一定的调整，调整为如下： ``` { "name": "@brain-ui/utils", "version": "0.0.1", "main": "index.js", "scripts": { "test": "echo "Error: no test specified" && exit 1" }, "keywords": [], "author": "", "license": "ISC" } ``` 没有过多特殊点，我们在那么前面添加了一层命名空间，这样表示当前的utils项目是我们@brain-ui的子项目，其他两个目录同理，此时我们就完成了**packages**下的基础文件结构，然后，我么对**example**示例开发调试文档进行开发： ### 本地开发调试预览项目开发同样我们cd到example项目当中进行，`pnpm init`初始化操作，同理并修改掉其name名称，为其添加命名空间，此时，我们就要进行代码编写了：本地的开发构建我们已经提前说明了，使用**Vite**进行开发，所以我们安装**Vite**已经**Vue**的插件，具体的[配置 Vite | Vite 官方中文文档](https://cn.vitejs.dev/config/)可以在此处查看，[插件 | Vite 官方中文文档](https://cn.vitejs.dev/plugins/)在这里查看，配置十分简单，和大多数配置文件类似，默认的配置需要我们在根目录创建`vite.config.ts`,也可以自己通过在**package.jsn**中通过--config指定地址，那么配置文件就直接贴这里了： ``` import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [vue()], }) ``` 当然别忘了先安装我们需要的依赖包，只需要两个包即可，**Vite**以及其**Vue**的插件，上述的文档地址也有其详细说明： ``` pnpm install vite @vitejs/plugin-vue -D ``` 同样下载为开发依赖即可，此时，我们就可以执行**vite**启动命令了,此次这里的版本对应的是 - vite: 3.1.8 - @vitejs/plugin-vue: 3.1.2 不同版本之间可能会有些许差异，自己编码过程中请注意 ``` npx vite ``` 很明显，我们这样启动太麻烦，我们需要将命令配置到**package.json**中的**scripts**当中去， ``` "scripts": { "dev": "vite" }, ``` 配置完成后之后只需要`pnpm run dev`启动即可，但是此时我们还不能启动，因为我们还缺少**html**文件，所以我们在目录下创建**index.html**，其也是默认名称，如需更该也要同步配置，同时我们需要引入一个入口文件**main.ts**,代码如下： ``` Document

``` 不要忘记，**script的type为module**，因为我们前面已经提到了**vite是基于es6 module**的，然后再放置一个**id为app**的**dom节点**即可，那么我们再创建一个**main.ts**和一个**app.vue**用于一个基础**vue**项目的搭建： ``` /* main.ts */ import { createApp } from 'vue' import App from './app.vue' const app = createApp(App) app.mount('#app') ``` ``` /* app.vue */ ``` 这样就是一个最基础的**vue项目入口**文件了，但是因为是**typescript项目**，所以会出现这个错误： ![002.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d3912823eb3f4fb3a3dd13809138b50a~tplv-k3u1fbpfcp-watermark.image?) 这里提示没有申明，所以我们需要对这个文件申明一个模块，告诉**ts**其是申明类型的，所以我们可以在项目根目录下创建一个文件`typings`，然后在其中加入**vue**的申明文件`vue-shim.d.ts`,里面的配置内容，官方文档都可以看到，我们直接粘贴过来： ``` declare module '*.vue' { import type { DefineComponent } from 'vue' const component: DefineComponent<{}, {}, any> export default component } ``` - 这个名字是非必须的，只需要是**d.ts**结尾的我文件即可，名称不重要此时我们发现这个报错已经消失了。此时我们执行 ``` pnpm run dev ``` 就可以快速启动**vite**了，此时我们可以看到： ![003.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d57c1f93913f4cc3b44634dbe716a196~tplv-k3u1fbpfcp-watermark.image?) 打开之后就看到了我们在**app.vue**中编写的内容了，这里的**Vite**版本2与3之间存在一些更新，如果使用的是**Vite3.x**此处运行就会报一个**path的错误**，这就是因为版本更新的原因，如果遇到这个问题，请将你的**Node版本**升级到16即可解决这个问题，好了，如果成功，打开页面，我们已经可以成功访问到**app.vue**页面了： ![004.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c714fb0282d8400dae0a289feb1cc949~tplv-k3u1fbpfcp-watermark.image?) 此时我们的预览调试项目已经ok了，后续开发的组件只需要引入到这个项目当中，我们就可以边开发边调试项目了。但是当前我们执行命令是在**brain-ui/example**目录下，并不是根文件夹，所以我们需要把这个命令放在，根目录当中，所以我们需要在根目录下的**package.json**中添加一条新命令: ``` "scripts": { "dev": "pnpm -C example dev" }, ``` 此时我们在根目录执行`pnpm run dev`即可实现相同的效果，唯一需要知道的是 -C后面的参数表示命名空间，表示在**example命名空间下**执行**dev**命令。此时我们的开发调试环境已经实现了。 ### 子项目之间的互相引用刚刚我们已经对**packages**下面的三个项目进行了简单的初始化，此时我们对其进行一些补充，我们在不同项目里都进行了`pnpm init`，所以我们知道他们都可以理解为单独的项目，所以在开发过程中是需要互相引用的，为了实现其相互引用，我们将其安装到根目录当中去，正常情况我们这样就可以安装一个包了 ``` pnpm install @brain-ui/components ``` 但是此时我们发现会报错： ![005.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f82b48e5af5641e98d54cf2d962fc046~tplv-k3u1fbpfcp-watermark.image?) 并没有安装成功，但是也很好理解，翻译一下，如果你想安装包到根目录下，你安装的时候就必须在参数后面添加`-w`表示同意安装到根目录，所以我们添加上安装 ``` pnpm install @brain-ui/components @brain-ui/theme-chalk @brain-ui/utils -w ``` ![006.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/69bbc4bbcebb46ebb3786b047a2616f3~tplv-k3u1fbpfcp-watermark.image?) 我们可以看到已经安装成功，可能有些同学会好奇，这样是如何下载的，日常我们安装的包都是从**npmjs**仓库远程下载的，我们这里下载的其实是本地的包，实际就是创建了一个软链接，自己开发过小组件的同学一定对`npm link`不陌生，这里是同理，但是不同的是**npm link**是将别处写的模块引入到的项目当中来，而我们当前是将自己的模块创建一个软链安装在根目录下，更加方便，此时我们打开**node_modules**可以看到，后面有个小箭头，这个就表示本地创建的软链接。 ![007.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6fd1cb6b5dee45a9b3cc7a4d93bdb7cc~tplv-k3u1fbpfcp-watermark.image?) 此时我们就下载完成，成功创建了软链接，因为我们是在根目录下下载的，所以我们子项目当中都可以使用这些包，此时我们就感觉到了**Monorepo架构**的便利性了，这些包可以在开发过程中完成相互引用了。好了，本节内容我们已经完成了组件基础目录的搭建，**Monorepo**的实现，**ts配置**、**开发调试环境的搭建**、**子模块子包的相互引用问题**等一系列基础架构的实现与讲解，为之后的组件开发提供基础保障，每个模块单一来看都很简单，有经验的同学可能会觉得过于繁琐，但是想带来的效果是能做到每一步讲的能足够简易，以便于方便理解。目前的内容依旧只是基础部分，我们的对比**Element-plus**的整体结构逐步完善。下一节内容开始，我们就可以开始进入组件的开发阶段了，在后续我们继续逐步完成此项工程化的配置把，如果你对本专栏有兴趣，可以订阅此专栏，后续持续更新。 ### 历史回顾 - [开篇：探索前端工程化、从零到一打造一个前端组件库！](https://juejin.cn/post/7151961741776125989) - [【专栏01】：组件库开发之基础架构梳理与工具栈选用](https://juejin.cn/post/7154797028113907743)

我是开发调试页面