2.6 主题、测试、格式化
最后更新于
最后更新于
原文地址:
本文介主题构建、自动化测试、代码质量检查、类型声明。
项目主题 theme-chalk
是一个独立的项目,通过 gulp
打包构建生成,支持单独发布。
packages/theme-chalk
下放有字体文件,scss 相关变量、mixin 及公共样式设置,各 UI 组件对应的 scss 文件。项目目录结构如下 👇:
@mixin
指令允许我们定义一个可以在整个样式表中重复使用的样式。
@include
指令可以将混入(mixin)引入到文档中。
混入(mixin)通过 @mixin 指令来定义。创建一个名为 "important-text" 的混入:
@include 指令可用于包含一混入,包含 important-text 混入代码如下:
build/bin/gen-cssfile
找到 components.json
, 获取组件列表,找到packages/theme-chalk/src
目录下对应的各组件的 component-name.scss
文件,以@import "./component-name.scss"
的形式,写入packages/theme-chalk/index.scss
文件-样式总入口文件。若是组件对应的样式不存在,会自动创建遗漏的样式文件。
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
目录下。
通过cp-cli
,将packages/theme-chalk/src/lib
目录下文件拷贝至lib/theme-chalk
目录下。
SSR 引入类库(require)测试, build\release.sh
文件执行 node test/ssr/require.test.js
命令。
项目通过执行 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。适用于任何单元测试框架。
目录结构如下 👇:
karma.conf.js
测试配置信息。
index.js
测试入口文件,单元测试默认测试 src
目录下除了 main.js 之外的所有文件,根据实际情况调整测试范围。
测试脚本命名方式为 [组件名].spec.js
, 统一放在 test/unit/specs/
目录下,语法结构如下 👇。
如果测试成功,终端输出测试覆盖率概览 👇。
同时karma-coverage
会在 test/unit/coverage
文件夹中生成测试覆盖率结果的概览信息lcov.info
和网页 lcov-report/**
。
生成测试覆盖率结果的网站,在浏览其中打开,内容如下 👇:
types
目录存放组件的 TypeScript
声明文件,以 .d.ts
后缀结尾。提升typescript
项目中引入组件库的开发体验,需要在 package.json
中指定 typing
属性的值, 声明的入口文件才能生效。
👇 项目工程化系列文章链接如下,推荐按照顺序阅读文章 👇。
element 使用了 eslint
进行代码风格检测,辅助编码规范执行,有效控制代码质量,实现项目代码风格统一。 编写发布了 eslint 的扩展规则配置-- 。
eslint
所能提供的格式化功能很有限;而 prettier
在格式化代码方面具有更大优势。可以集成 prettier
负责格式限制、自动格式化,详细配置参考。
点击以下链接,可以快速查看本系列其他文章:
1️⃣ 2️⃣ 3️⃣ 4️⃣ 5️⃣ 6️⃣ 7️⃣