Element UI项目构建浅析

前言

之前分析Element框架的项目结构，实际上主要是分析package.json中script中相关的命令，依此分析了命令中主要的构建过程。

本文着眼于package.json中相关的依赖以及项目中涉及的相关工具，从而了解更深入理解Element以及框架构建工具。

具体逻辑

Element项目结构如下：

|-- Element
|-- .babelrc // babel配置文件
|-- .eslintignore // eslint校验忽略文件
|-- .eslintrc // eslint配置文件
|-- .gitattributes // git属性配置文件
|-- .gitignore // git忽略追踪管理的文件
|-- .travis.yml // 持续集成配置文件
|-- CHANGELOG.en-US.md // 版本改变点log文件-英文版
|-- CHANGELOG.es.md
|-- CHANGELOG.zh-CN.md // 版本改变点log文件-中文版
|-- FAQ.md // 常见问题说明文档
|-- LICENSE // 开源协议
|-- Makefile // 自动化编译配置文件
|-- README.md // 项目说明文件
|-- components.json // 组件列表（所有组件）文件
|-- element_logo.svg // logo svg文件
|-- package.json
|-- postcss.config.js // postcss配置文件
|-- yarn.lock // yarn配置文件
|-- build // webpack编译配置文件目录
|-- examples // element ui官方主页项目目录
|-- lib // 打包后的文件目录
|-- packages // 组件源码目录
|-- src // 项目使用到的公共指令、工具集等源码存放目录
|-- test // 单元测试相关
|-- types // typescript相关文件包

梳理上面整个的项目结构，关注点在如下几点：

• yarn.lock + package.json
• MakeFile
• postcss.config.js
• .travis.yml

对上面几点，就优先级依次详细解释：

.travis.yml

Travis CI提供持续集成服务。持续集成指的是只要代码有变更，就会自动运行构建和测试，反馈运行结果，确保符合预期以后，再将新代码集成到主干。

Travis CI只支持GitHub，不支持其他代码托管服务。

Travis要求项目的根目录下面必须要有一个.travis.yml文件，.travis.yml文件是Travis的配置文件，该文件指定了Travis的行为。

.travis.yml文件采用YAML格式，该文件必须保存在GitHub仓库里面，一旦代码仓库有新的Commit，Travis就会找这个文件，执行里面的命令。

如何使用Travis.org？

• 访问https://travis-ci.org/，登录Github
• Travis会列出GitHub上所有仓库以及所属组织，选择你需要Travis帮你构建的仓库，打开仓库开关，Travis会监听这个仓库的所有变化

Travis的用途：

• 用于运行测试
• 部署GitHub Pages
• 在HeroKu上运行应用程序，即部署个人站点
• 发送通知

yaml语言格式

• 大小写敏感
• 使用缩进表示层级关系，只允许使用空格
• 只要相同层级的元素左侧对齐即可
• #表示注释，一组-开头的表示数组

Element项目的.travis.yml文件内容如下：

sudo: false
language: node_js
node_js: 8
before_install:
- export CHROME_BIN=chromium-browser
- export DISPLAY=:99.0
- sh -e /etc/init.d/xvfb start
- export TRAVIS_COMMIT_MSG="[deploy] $(git log --format='%h - %B' --no-merges -n 1)"
- export TRAVIS_COMMIT_USER="$(git log --no-merges -n 1 --format=%an)"
- export TRAVIS_COMMIT_EMAIL="$(git log --no-merges -n 1 --format=%ae)"
after_success:
- sh build/deploy-ci.sh
- cat ./test/unit/coverage/lcov.info | ./node_modules/.bin/coveralls

• sudo：是否可使用sudo命令
• language：定义环境，element项目定义为node.js
• node_js：定义node_js版本号
• before_install：钩子函数，在install阶段之前
• after_success：钩子函数，在script阶段成功时执行

before_install钩子函数主要执行内容是数组形式，主要是定义相关的环境变量和相关服务的启动，即：

sh -e /etc/init.d/xvfb start

sh - e是判断 /etc/init.d/xvfb服务是否存在

after_success钩子函数主要执行内容是数组形式：

• sh build/deploy-ci.sh：执行deploy-ci.sh脚本文件
• cat ./test/unit/coverage/lcov.info | ./node_modules/.bin/coveralls：Coveralls自动测试代码覆盖率报告

deploy-ci.sh脚本文件主要的功能：

• git config定义user.name和user.email
• 生产版本、theme-chalk、element项目文档官网编译发布新tag
• 开发分支的theme-chalk、文档官网编译提交到master分支

postcss.config.js

定义postcss对css进行处理，主要是element项目中Class的BEM结构命名相关处理。

MakeFile

MakeFile是和make命令一起配合使用的，MakeFile用于自动化编译项目等。在Element项目中，实际上就是定义npm命令的别名。

yarn.lock + package.json

Element项目实际上主要结构是采用yarn，但是也支持npm命令的执行。

这里主要看下package.json中的依赖，主要有：

• algoliasearch：网站实时搜索库
• chai：具有BDD/TDD风格的验证库用于测试
• cheerio：服务器端抓取页面模块库，适用web爬虫程序
• chokidar：监视文件变化库
• copy-webpack-plugin：在webpack中拷贝文件和文件夹的库
• coveralls：测试覆盖率检测报告展示平台
• cp-cli：在node.js平台支持cp命令的库
• cross-env：跨平台设置环境变量的库
• highlight.js：高亮代码库
• html-webpack-plugin：简化HTML创建的库
• mini-css-extract-plugin：将CSS提取到单独文件中的库
• perspective.js：视觉差库
• transliteration：音译模块，支持中文转拼音等
• gulp：涉及到gulp-autoprefixer、gulp-cssmin、gulp-postcss、gulp-sass插件
• postcss：将CSS解析成可供JS操作的AST并生成相关结果的库

总结

Element项目框架使用到的主要工具有：

• webpack
• gulp
• postcss

主要还是使用webpack作为构建编译打包工具，项目本身使用yarn来管理依赖版本，但是同时也支持npm命令。
JS与CSS分离支持CSS单独打包处理并通过gulp和postcss来进行压缩转换等处理。