2.6 主题、测试、格式化

原文地址： https://juejin.cn/post/6972180649625157645

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

项目主题

📁 packages/theme-chalk

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

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

├─gulpfile.js               # 帮助gulp实现自动化管理项目功能
├─package.json
├─src
|  ├─reset.scss             # 重置浏览器的默认属性
|  ├─index.scss             # 样式入口文件
|  ├─base.scss              # 基础 引入动画 、图标样式
|  ├─icon.scss              # 图标样式
...
|  ├─button.scss            # 组件对应单独的scss文件
|  ├─upload.scss            # 组件对应单独的scss文件
...
|  ├─mixins                 # 混入(mixin)定义
|  |   ├─config.scss        # 变量
|  |   ├─function.scss      # 自定义函数 @fuction
|  |   ├─mixins.scss        # 支持接收参数
|  |   ├─utils.scss         # 公共样式
|  |   └button.scss         # 按钮公共样式
|  ├─fonts  # 字体图标
|  ├─date-picker            # 日期时间选择器样式
|  ├─common
|  |   ├─transition.scss    # 动画
|  |   └var.scss            # 主题sass变量
├─lib                       # 打包输出目录

@mixin 与 @include

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

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

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

@mixin important-text {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
}

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

/* @include实例 */
.danger {
  @include important-text;
  background-color: green;
}
将以上代码转换为 CSS 代码，如下所示：

/* 转换为 CSS 代码 */
.danger {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
  background-color: green;
}

主题构建

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 目录下。

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

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

项目测试

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。适用于任何单元测试框架。

目录结构如下 👇：

├─index.js			    # 入口文件
├─karma.conf.js			    # karma配置
├─util.js                           # 公共方法
├─specs                             # 测试用例
|   ├─alert.spec.js                 # 测试用例脚本 [组件名].spec.js
|   ├─button.spec.js
...
...
|   ├─upload.spec.js
|   ├─util.clickoutside.spec.js
|   └util.vue-popper.spec.js
├─mocks                             # 模拟数据
|   └uri.js
├─coverage                          # 测试覆盖率报告
|    ├─lcov.info                    # 报告信息
|    ├─lcov-report                  # 报告网站