05.Element UI 项目工程化剖析之主题构建、自动化测试、代码质量检查、类型声明

1,694 阅读4分钟

0x.00 📢 前言

本文将介绍项目的主题构建、自动化测试、代码质量检查、类型声明。

项目工程化系列文章主要通过解析element项目源码,从结构、功能、源码方面逐一解析,学习其模块化、组件化、规范化、自动化等多维度优秀实践。主要内容包含项目结构、npm script、项目构建、文档解析、打包配置、发布部署等。

👇 项目工程化系列文章链接如下,推荐按照顺序阅读文章 👇。

1️⃣ 工程化剖析:项目概览、package.json、npm script
2️⃣ 工程化剖析:项目构建、MD解析
3️⃣ 工程化剖析:打包配置
4️⃣ 工程化剖析:发布部署、持续集成
5️⃣ 工程化剖析:主题构建、自动化测试、代码质量检查、类型声明
6️⃣ 工程化剖析:项目网站
7️⃣ 工程化剖析:命令之图解

本专栏的 gitbook 版本地址已经发布 📚《learning element-ui》 ,内容同步更新中!


0x.01 🎨 主题

📁 packages/theme-chalk

项目主题 theme-chalk 是一个独立的项目,通过 gulp 打包构建生成,支持单独发布。 ElementUI/theme-chalk 仓库地址

packages/theme-chalk 下放有字体文件,scss相关变量、mixin及公共样式设置,各UI组件对应的scss文件。项目目录结构如下 👇:

image.png

@mixin 与 @include

@mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。

@include 指令可以将混入(mixin)引入到文档中。

混入(mixin) 通过 @mixin 指令来定义。创建一个名为 "important-text" 的混入:

carbon (47).png

@include 指令可用于包含一混入,包含 important-text 混入代码如下:

carbon (48).png

主题构建

image.png

1️⃣ 生成入口文件

build/bin/gen-cssfile 找到 components.json, 获取组件列表,找到packages/theme-chalk/src目录下对应的各组件的 component-name.scss 文件,以@import "./component-name.scss"的形式,写入packages/theme-chalk/index.scss文件-样式总入口文件。若是组件对应的样式不存在,会自动创建遗漏的样式文件。

2️⃣ 构建主题

gulp是一种基于流(stream)的自动化构建工具,gulpfile.js 定义两个任务(task):

  • packages/theme-chalk/src目录下的 scss 文件转换成 css 文件,输出至packages/theme-chalk/src/lib目录下;
  • packages/theme-chalk/src/fonts目录下的字体图标文件压缩处理,输出至 packages/theme-chalk/src/lib/fonts 目录下。

carbon (50).png

3️⃣ 拷贝至lib/theme-chalk下

通过cp-cli,将packages/theme-chalk/src/lib目录下文件拷贝至lib/theme-chalk目录下。

0x.02 测试

test\ssr\require.test.js

SSR 引入类库(require)测试, build\release.sh文件执行 node test/ssr/require.test.js 命令。

const path = require('path');

try {
  process.env.VUE_ENV = 'server';
  require(path.join(process.env.PWD, './lib/index'));
  console.log('SSR require test PASS');
} catch (e) {
  console.error('SSR require test error');
  throw Error(e);
}

📁 test/unit 单元测试

项目通过执行 npm run test npm run test:watch 运行单元测试,使用如下技术:

  • karma 测试执行过程管理工具(Test Runner)。
  • Mocha 是运行在 Node.js 和浏览器上的功能丰富的 JavaScript 测试框架。
  • Chai 是一个用于 Node.js 和浏览器的 BDD/TDD 断言库,可以与任何 JavaScript 测试框架便捷配对。
  • Sinon.JS 用于对 JavaScript 隔离测试 spy, stub 和 mock。适用于任何单元测试框架。

目录结构如下 👇:

image.png

karma.conf.js 测试配置信息。

carbon (95).png

index.js 测试入口文件,单元测试默认测试 src 目录下除了 main.js 之外的所有文件,根据实际情况调整测试范围。

image.png

测试脚本命名方式为 [组件名].spec.js , 统一放在 test/unit/specs/ 目录下,语法结构如下 👇。

image.png

如果测试成功,终端输出测试覆盖率概览 👇。

image.png

同时karma-coverage 会在 test/unit/coverage 文件夹中生成测试覆盖率结果的概览信息lcov.info和网页 lcov-report/**

生成测试覆盖率结果的网站,在浏览其中打开,内容如下 👇:

image.png

0x.03 代码质量检查

element 使用了 eslint 进行代码风格检测,辅助编码规范执行,有效控制代码质量,实现项目代码风格统一。 编写发布了 eslint 的扩展规则配置-- eslint-config-elemefe

eslint 所能提供的格式化功能很有限;而 prettier 在格式化代码方面具有更大优势。可以集成 prettier 负责格式限制、自动格式化,详细配置参考代码风格检查和格式化配置(ESlint & Prettier)

0x.04 类型声明

types 目录存放组件的 TypeScript 声明文件,以 .d.ts 后缀结尾。提升typescript 项目中引入组件库的开发体验,需要在 package.json 中指定 typing 属性的值, 声明的入口文件才能生效。

{
    "typings": "types/index.d.ts",
}

关注专栏

如果本文对您有所帮助请关注➕、 点赞👍、 收藏⭐!您的认可就是对我的最大支持!

此文章已收录到专栏中 👇,可以直接关注。