0x.00 前言
在用了5章篇幅 ElementUI源码学习:从零开始搭建Vue组件库汇总 讲解了如何编写一个组件、发布npm以及生成展示文档之后。接下来将分析Element项目的代码结构,学习其工程化思想。
前端开发早已从瘦客户端(thin client)架构/中心服务器(server-centric)架构进入到胖客户端(fat client)架构,各家技术百花齐放,让人目不暇接,直呼学不动了!伴随项目开发的复杂度日益增高,开发中需要直面各种问题: 开发效率、产品质量、多人协作等。
前端工程化是什么?
)。详见commit feat: add change log 2.15.0 (#20692)
👉 NPM脚本 ⭐
scripts
属性指定了运行脚本命令的npm命令行缩写,各个脚本可以互相组合使用,这些脚本覆盖整个项目的生命周期(开发、测试、打包、部署)。
脚本使用注意事项
通配符
由于 npm 脚本就是 Shell 脚本,因为可以使用 Shell 通配符。
"lint": "jshint *.js"
"lint": "jshint **/*.js"
上面代码中,*
表示任意文件名,**
表示任意一层子目录。
执行顺序
如果 npm 脚本里面需要执行多个任务,需要明确它们的执行顺序。如果是 并行执行(即同时的平行执行),使用&
符号。
$ npm run script1.js & npm run script2.js
如果是 继发执行(即只有前一个任务成功,才执行下一个任务),使用 &&
符号。
$ npm run script1.js && npm run script2.js
element
项目定义了很多脚本,按照用途大致分为项目基础、文件构建、项目开发 、发布部署、项目测试等。
脚本命令调用 build 目录中的众多文件,自动完成大量重复性工作,从而减少人为错误、提高效率。下面将逐一分析讲解脚本命令的功能和作用。
项目基础
npm run bootstrap
自动下载项目所需的模块,也就是配置项目所需的运行和开发环境。官方推荐使用 yarn
。
npm run clean
清除打包/测试生成的目录及文件,主要有lib
目录、test\unit\coverage
目录(跟测试代码覆盖率有关,详见后文)以及package\theme-chalk\lib
目录(跟主题有关,详见后文)。
npm run eslint 代码质量检查
基于 .eslintrc
和 .eslintignore
文件配置,调用 eslint
检测代码规范。--quiet
参数允报告错误,禁止报告警告。
项目使用自己封装的规则配置 eslint-config-elemefe
, 配置使用请参考前文 代码风格检查和格式化配置(ESlint & Prettier)。
{
"extends": "elemefe",
}
文件构建
npm run i18n
执行 build/bin/i18n.js
基于 examples/i18n/page.json
页面多语言配置和 examples/pages/template
目录下的所有模版文件,生成 zh-CN
、en-US
、es
、fr-FR
等四种语言的网站.vue
文件。
npm run build:file
该命令主要用于文件的自动化生成,其多个任务是 并行执行。
- 执行
build/bin/iconInit.js
生成examples/icon.json
图标集合文件。 - 执行
build/bin/build-entry.js
生成src/index.js
组件库入口文件。 - 执行
build/bin/i18n.js
生成官网的多语言网站文件。 - 执行
build/bin/version.js
生成examples/version.json
记录项目版本信息,用于网站版头部导航版本切换。
npm run build:theme
该命令主要用于项目的主题和样式生成。
- 执行
build/bin/gen-cssfile
生成packages/theme-chalk/index.scss
样式总入口文件。全量引入组件时,引用改样式如下import 'packages/theme-chalk/src/index.scss'
。 - 采用
gulp
进行样式构建,将packages/theme-chalk/src
下的scss
文件转换成css
文件,输出至packages/theme-chalk/src/lib
目录下;将packages/theme-chalk/src/fonts
下的字体文件压缩处理,输出至packages/theme-chalk/src/lib/fonts
目录下。 - 将构建内容
packages/theme-chalk/lib
拷贝到lib/theme-chalk
下。前面sytle
属性配置的路径文件lib/theme-chalk/index.css
就是这样生成的。
npm run build:utils
该命令作用把 src
目录下除了 src/index.js
入口文件外的其他文件通过 babel
转译后,输出至 lib
文件夹下。
npm run build:umd
该命令作用是执行 build/bin/build-locale.js
通过 babel
处理 src/locale/lang
目录下的文件,生成 umd
格式的文件,输出至 lib/umd/locale
目录下。
项目开发
npm run dev
该命令用于运行组件库的本地开发环境。
- 执行命令
npm run bootstrap
配置项目所需的运行和开发环境。 - 执行命令
npm run build:file
详解见前文,构建项目官网相关文件。 webpack-dev-server
提供一个本地服务(serve) 并运行项目网站(打包规则配置build/webpack.demo.js
);同时执行build/bin/template.js
文件启动监听examples/pages/template
目 录下模板文件,若内容发生变化,则重新生成网站文件。 webpack-dev-server具有 live reloading功能,网站内容会实时重新加载。
npm run dev:play
该命令用于组件库开发中的功能展示,运行效果如下图。
- 执行命令
npm run build:file
详解见前文,构建项目官网相关文件。 - 由于配置了如下环境变量
NODE_ENV=development PLAY_ENV=true
,可以在build/webpack.demo.js
打包文件中看到入口文件examples/play.js
,play.js
引用examples/play/index.vue
, 可以引入组件库任意组件用于功能展示。
发布部署
npm run deploy:build
该命令作用主要是打包构建项目官网内容,为网站部署做准备。
- 执行命令
npm run build:file
详解见前文,构建项目官网相关文件。 webpack --config build/webpack.demo.js
基于production
模式,打包生成内容输出至examples/element-ui/
目录下。echo element.eleme.io>>examples/element-ui/CNAME
往examples/element-ui/CNAME
文件中写入element.eleme.io
。Github Docs / Managing a custom domain for your GitHub Pages site
npm run deploy:extension
该命令作用主要是打包构建主题编辑器的 chorme 插件项目--Element Theme Roller
官方商城地址 。基于 production
模式打包生成内容输出至 examples/extension
目录下。
使用该插件可以自定义全局变量和组件的所有设计标记,并实时预览新主题并基于新主题生成完整的样式包,以供直接下载
👉 npm run dist ⭐
该命令作用主要是构建组件库。
- 执行命令
npm run clean
,详见上文; - 执行命令
npm run build:file
,详见上文; - 执行命令
npm run lint
,详见上文; - 执行打包
webpack --config build/webpack.conf.js
,入口文件src/index.js
以umd
格式输出到lib/index.js
; - 执行打包
webpack --config build/webpack.common.js
,入口文件src/index.js
以commonjs2
格式输出到lib/element-ui.common.js
; - 执行打包
webpack --config build/webpack.component.js
,入口文件components.json
,将packages
目录下的组件,以commonjs2
格式分别输出到lib
目录,用于按需引入; - 执行命令
npm run build:utils
,详见上文; - 执行命令
npm run build:umd
,详见上文; - 执行命令
npm run build:theme
,详见上文。
👉 npm run pub ⭐
该命令作用主要是组件库的发布、代码管理。
- 执行命令
npm run bootstrap
,详见上文; - 运行shell脚本
sh build/git-release.sh
,检查代码dev
分支是否存在冲突(No conflicts); - 运行shell脚本
sh build/release.sh
,合并dev分支到master分支、更新版本号、发布主题、push代码到远程仓库、发布组件库至NPM; - 执行文件
node build/bin/gen-indices.js
,提供algoliasearch
搜索功能,需要把examples/docs
目录下.md
文件内容格式化后上传algolia
,效果详见下图 👇。
测试
实现项目自动化测试。
- karma测试执行过程管理工具(Test Runner)。
- Mocha 是运行在 Node.js 和浏览器上的功能丰富的 JavaScript 测试框架。
- Chai 是一个用于 Node.js 和浏览器的 BDD/TDD 断言库,可以与任何 JavaScript 测试框架便捷配对。
- Sinon.JS 用于对 JavaScript 隔离测试 spy, stub 和 mock。适用于任何单元测试框架。
测试脚本命名方式为 [组件名].spec.js
, 统一放在 test/unit/specs/
目录下。如果测试成功,karma-coverage
会在 test/unit/coverage
文件夹中生成测试覆盖率结果的网页。
npm run test
该命令用于启动项目测试,设置了参数 --single-run
执行一次测试之后,karma 会自动停掉。
npm run test:watch
该命令用于启动项目测试,执行结束后会继续监测文件是否变更,若发生变更,会重新执行一次测试。
👋👋 受制于篇幅的问题,本文到此就结束了!后续文章将会继续分析学习工程化实践。
0x.03 🔖 链接汇总
点击以下链接,可以快速查看本系列其他文章:
0x.04 📚 参考
https://zhuanlan.zhihu.com/p/359734011
http://www.ruanyifeng.com/blog/2016/10/npm_scripts.html