从 ElementUI 源码的构建流程来看前端 UI 库设计

Posted 2021-08-23 前端森林

引言

由于业务需要，近期团队要搞一套自己的UI组件库，框架方面还是Vue。而业界已经有比较成熟的一些UI库了，比如ElementUI、AntDesign、Vant等。

结合框架Vue，我们选择在ElementUI基础上进行改造。但造轮子绝非易事，首先需要先去了解它整个但构建流程、目录设计等。

本文通过分析ElementUI完整的构建流程，最后给出搭建一个完备的组件库需要做的一些工作，希望对于想了解ElementUI源码或者也有搭建UI组件库需求的你，可以提供一些帮助！

我们先来看下ElementUI的源码的目录结构。

目录结构解析

• github：存放了Element UI贡献指南、issue和PR模板
• build：存放了打包相关的配置文件
• examples：组件相关示例 demo
• packages：组件源码
• src：存放入口文件和一些工具辅助函数
• test：单元测试相关文件，这也是一个优秀的开源项目必备的
• types：类型声明文件

说完文件目录，剩下还有几个文件（常见的.babelrc、.eslintc这里就不展开说明了），在业务代码中是不常见的：

• .travis.yml：持续集成(CI)的配置文件
• CHANGELOG：更新日志，这里Element UI提供了四种不同语言的，也是很贴心了
• components.json：标明了组件的文件路径，方便 webpack 打包时获取组件的文件路径。
• FAQ.md：ElementUI 开发者对常见问题的解答。
• LICENSE：开源许可证，Element UI使用的是MIT协议
• Makefile：Makefile 是一个适用于 C/C++ 的工具，在拥有 make 环境的目录下， 如果存在一个 Makefile 文件。 那么输入 make 命令将会执行 Makefile 文件中的某个目标命令。

深入了解构建流程前，我们先来看下ElementUI 源码的几个比较主要的文件目录，这对于后面研究ElementUI的完整流程是有帮助的。

package.json

通常我们去看一个大型项目都是从package.json文件开始看起的，这里面包含了项目的版本、入口、脚本、依赖等关键信息。

我这里拿出了几个关键字段，一一的去分析、解释他的含义。

main

项目的入口文件

import Element from \'element-ui\' 时候引入的就是main中的文件

lib/element-ui.common.js是commonjs规范，而lib/index.js是umd规范，这个我在后面的打包模块会详细说明。

files

指定npm publish发包时需要包含的文件/目录。

typings

TypeScript入口文件。

home

项目的线上地址

unpkg

当你把一个包发布到npm上时，它同时应该也可以在unpkg上获取到。也就是说，你的代码既可能在NodeJs环境也可能在浏览器环境执行。为此你需要用umd格式打包，lib/index.js是umd规范，由webpack.conf.js生成。

style

声明样式入口文件，这里是lib/theme-chalk/index.css，后面也会详细说明。

scripts

开发、测试、生产构建，打包、部署，测试用例等相关脚本。scripts算是package.json中最重要的部分了，下面我会一一对其中的重要指令进行说明。

bootstrap

"bootstrap": "yarn || npm i"

安装依赖， 官方推荐优先选用yarn(吐槽一句：我刚开始没看明白，想着bootstrap不是之前用过的那个 ui 库吗