You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
和 travis ci 结合使用的持续集成脚本,这个脚本在 .travis.yml 文件中被执行,代码被提交到 github 仓库以后会自动被 Tavis CI 执行,ci 会自动找项目中的 .travis.yml 文件,并执行里面的命令。但这个我们可能用不到,一般团队内部都会有自己的持续集成方案。
/build/git-release.sh
这里主要是和远程的 dev 分支做 diff 然后合并。
#!/usr/bin/env sh# 这里主要是和远程的 dev 分支做 diff 然后合并
git checkout dev
iftest -n "$(git status --porcelain)";thenecho'Unclean working tree. Commit or stash changes first.'>&2;exit 128;fiif! git fetch --quiet 2>/dev/null;thenecho'There was a problem fetching your branch. Run `git fetch` to see more...'>&2;exit 128;fiiftest"0"!= "$(git rev-list --count --left-only @'{u}'...HEAD)";thenecho'Remote history differ. Please pull changes.'>&2;exit 128;fiecho'No conflicts.'>&2;
travis ci 结合脚本的方式来完成持续集成的工作,不过这个可能对于内部项目用不上,因为 travis ci 只能用于 github,内部一般使用 gitlab,也有配套的持续集成
Makefile
make 命令的配置文件,写过 C、C++ 的同学应该比较熟悉。
执行 make 命令可以看到详细的帮助信息。比如:执行 make install 装包、make dev 启动本地开发环境、make new comp-name 中文名 新建组件等。使用 make 命令相较于 npm run xx 更方便、清晰、简单,不过其内部也是依赖于 npm run xx 来完成真正的工作,相当于为了更好的开发体验,将众多 npm run cmd 提供了一层封装。
package.json -> scripts
elemnt 编写了很多 npm scripts,这些 script 结合 /build 中的众多脚本实现通过脚本来自动完成大量重复的体力劳动,比人工靠谱且效率更高,这个设计我觉得是 element 中最值得大家学习的地方,可以将这样的设计应用到自己的项目中,助力业务提效。
如何快速为团队打造自己的组件库(上)—— Element 源码架构
当学习成为了习惯,知识也就变成了常识。感谢各位的 点赞、收藏和评论。
新视频和文章会第一时间在微信公众号发送,欢迎关注:李永宁lyn
文章已收录到 github,欢迎 Watch 和 Star。
封面
简介
详细讲解了 ElementUI 的源码架构,为下一步基于 ElementUI 打造团队自己的组件库打好坚实的基础。
如何快速为团队打造自己的组件库?
组件库是现代前端领域中不可缺少的一项基建。它可以提高代码的复用性、可维护性,提高团队的生产效率,更好的服务于未来。
那么如何为团队打造自己的组件库呢? 最理想的方案是借用社区的能力,去裁剪一个优秀的开源库,只保留你需要的东西,比如它的架构、工程化和文档能力,以及部分基础组件,在裁剪的过程中你可能会发现它的一些问题,然后在你的组件库中去优化并解决。
Element 源码架构
因为团队的技术栈是 Vue,所以选择基于 element 进行二次开发,在开始前先对 element 框架源码进行详细的刨析,为打造组件库做知识储备。element 框架源码由工程化、官网、组件库、测试和类型声明这 5 部分组成。
工程化
element 的架构是真的优秀,通过大量的脚本实现优秀的工程化,致力于让组件库的开发者专注于事情本身。比如添加新组件时,一键生成组件所有文件并完成这些文件基本结构的编写和相关的引入配置,总共涉及 13 个文件的添加和改动,而你只需完成组件定义这件事即可。element 的工程化由 5 部分组成:build 目录下的工程化配置和脚本、eslint、travis ci、Makefile、package.json 的 scripts。
build
build 目录存放工程化相关配置和脚本。比如
/build/bin
目录下的 JS 脚本让组件库开发者专注于组件的开发,除此之外不需要管其他任何事情;build/md-loader
是官网组件页面根据 markdown 实现组件 demo + 文档 的关键;还有比如持续集成、webpack 配置等,接下来就详细介绍这些配置和脚本。/build/bin/build-entry.js
组件配置文件(components.json)结合字符串模版库,自动生成 /src/index.js 文件,避免每次新增组件时手动在 /src/index.js 中引入和导出组件。
/build/bin/build-locale.js
通过 babel 将 ES Module 风格的所有翻译文件(/src/locale/lang)转译成 UMD 风格。
/build/bin/gen-cssfile.js
自动在
/packages/theme-chalk/src/index.scss|css
中引入各个组件包的样式,在全量注册组件库时需要用到这个样式文件,即import 'packages/theme-chalk/src/index.scss
。/build/bin/i18n.js
根据模版(
/examples/pages/template
)生成四种语言的官网页面的 .vue 文件。/build/bin/iconInit.js
根据 icon.scss 样式文件中的选择器,通过正则匹配的方式,匹配出所有的 icon 名称,然后将这些 icon 名组成数组,将数组写入到
/examples/icon.json
文件中,该文件在官网的 icon 图标页用来自动生成所有的 icon 图标。/build/bin/new-lang.js
为组件库添加新语言,比如 fr(法语),分别为涉及到的文件(components.json、page.json、route.json、nav.config.json、docs)设置该语言的相关配置,具体的配置项默认为英语,你只需要在相应的文件中将这些英文配置项翻译为对应的语言即可。
/build/bin/new.js
为组件库添加新组件时会使用该脚本,一键生成组件所有文件并完成这些文件基本结构的编写和相关的引入配置,总共涉及 13 个文件的添加和改动,比如:
make new city 城市列表
。该脚本的存在,让你为组件库开发新组件时,只需专注于组件代码的编写即可,其它的一概不用管。这里有个缺点就是,新建组件时不会自动重新生成 /src/index.js,也就是说不会将新生成的组件自动在组件库入口中引入。这也简单,只需要配置下 Makefile 即可,将 new 命令改成
node build/bin/new.js $(filter-out $@,$(MAKECMDGOALS)) && npm run build:file
即可。/build/bin/template.js
监听
/examples/pages/template
目录下的所有模版文件,当模版文件发生改变时自动执行npm run i18n
,即执行 i18n.js 脚本,重新生成四种语言的 .vue 文件。/build/bin/version.js
根据
/package.json
文件,自动生成/examples/version.json
,用于记录组件库的版本信息,这些版本洗洗在官网组件页面的头部导航栏会用到。/build/md-loader
它是一个 loader,官网组件页面的 组件 demo + 文档的模式一大半的功劳都是源自于它。
可以在
/examples/route.config.js
中看到registerRoute
方法生成组件页面的路由配置时,使用loadDocs
方法加载/examples/docs/{lang}/comp.md
。注意,这里加载的markdown
文档,而不是平时常见的 vue 文件,但是却能想 vue 文件一样在页面上渲染成一个 Vue 组件,这是怎么做到的呢?我们知道,webpack 的理念是一切资源都可以 require,只需配置相应的 loader 即可。在
/build/webpack.demo.js
文件中的module.rules
下可以看到对 markdow(.md) 规则的处理,先通过md-loader
处理markdown
文件,从中解析出 vue 代码,然后交给 vue-loader,最终生成 sfc(vue 单文件组件)渲染到页面。这就能看到组件页面的文档 + 组件 demo 展示效果。如果对 loader 的具体实现感兴趣可以自行深入阅读。
/build/config.js
webpack 的公共配置,比如 externals、alias 等。通过 externals 的配置解决了组件库部分代码的冗余问题,比如组件和组件库公共模块的代码,但是组件样式冗余问题没有得到解决;alias 别名配置为开发组件库提供了方便。
/build/deploy-ci.sh
和 travis ci 结合使用的持续集成脚本,这个脚本在 .travis.yml 文件中被执行,代码被提交到 github 仓库以后会自动被 Tavis CI 执行,ci 会自动找项目中的 .travis.yml 文件,并执行里面的命令。但这个我们可能用不到,一般团队内部都会有自己的持续集成方案。
/build/git-release.sh
这里主要是和远程的 dev 分支做 diff 然后合并。
/build/release.sh
脚本完成了以下工作:
合并 dev 分支到 master、
修改样式包和组件库的版本号
发布样式包和组件库
提交 master 和 dev 分支到远程仓库
该脚本在发布组件库时可以使用,特别是其中自动更改版本号的功能(每次 publish 时都忘改版本号)。这里提交代码到远程仓库的日志很简单,更详细的提交日志时通过更新日志文件
CHANGELOG.{lang}.md
提供的。/build/webpack.xx.js
webpack.common.js,构建 commonjs2 规范的包,会打一个全量的包
webpack.component.js,构建 commonjs2 规范的包,支持按需加载
webpack.conf.js,构建 UMD 规范的包,会打一个全量的包
webpack.demo.js,官网项目的 webpack 配置
webpack.extension.js,主题编辑器的 chorme 插件项目的 webpack 配置,项目在 extension 目录下
webpack.test.js,这个文件没什么用,不过看命名,应该是想用于测试项目的 webpack 配置,不过现在测试用的是 karma 框架
eslint
element 通过 eslint 来保证代码风格的一致性,还专门编写了 elemefe 作为 eslint 的扩展规则配置。为了保证官网项目的质量,在
/build/webpack.demo.js
中配置了eslint-loader
规则,在项目启动时强制检查代码质量。但是 element 在代码质量控制这块儿做的还是不够,比如:代码自动格式化能力太弱、只保证了 /src、/test、/packages、/build 目录下的代码质量,对于官网项目做的不够,特别是 文档格式的限制。这里建议大家再集成一个prettier
专门去做格式限制,让eslint
专注于代码语法的限制,可以参考 搭建自己的 typescript 项目 + 开发自己的脚手架工具 ts-cli 中的代码质量
部分去配置。travis ci
travis ci 结合脚本的方式来完成持续集成的工作,不过这个可能对于内部项目用不上,因为 travis ci 只能用于 github,内部一般使用 gitlab,也有配套的持续集成
Makefile
make 命令的配置文件,写过 C、C++ 的同学应该比较熟悉。
执行 make 命令可以看到详细的帮助信息。比如:执行 make install 装包、make dev 启动本地开发环境、make new comp-name 中文名 新建组件等。使用 make 命令相较于
npm run xx
更方便、清晰、简单,不过其内部也是依赖于npm run xx
来完成真正的工作,相当于为了更好的开发体验,将众多npm run cmd
提供了一层封装。package.json -> scripts
elemnt 编写了很多 npm scripts,这些 script 结合 /build 中的众多脚本实现通过脚本来自动完成大量重复的体力劳动,比人工靠谱且效率更高,这个设计我觉得是 element 中最值得大家学习的地方,可以将这样的设计应用到自己的项目中,助力业务提效。
官网
element 的官网是和组件库在一个仓库内,官网的所有东西都放在 /examples 目录下,就是一个 vue 项目。
entry.js
官网项目的入口,在这里全量引入组件库,及其样式。
nav.config.json
官网组件页面的侧边导航栏配置,一定要了解该 json 文件的结构,才能看懂
route.config.js
文件中生成组件页面所有路由的代码。route.config.js
根据路由配置自动生成官网项目的路由配置。
play
包括
play.js
和play/index.vue
,示例项目,比如你想看一个 element 中某个组件的效果,特别是组件按需加载时的显示效果,可以在play/index.vue
中引入使用,使用npm run dev:play
命令启动项目,也是在/build/webpack.demo.js
中通过环境变量来配置的。pages
官网的各个页面都在这里,通过 i18n.js 脚本 结合 pages/template 目录下的各个模版文件自动在 pages 目录下生成四种语言的 .vue 文件,这些 vue 文件会在 route.config.js 中被加载。
i18n
官网页面的翻译配置文件都在这里。
extension
主题编辑器的 chrome 插件项目。
dom
定义了 dom 样式操作方法,包括判断是否存在指定的样式、添加样式、移除样式、切换样式。
docs
组件文档目录,默认提供了四种语言的文档,目录结构为:
docs/{lang}/comp-name.md
。这些文档在组件页面加载(在 route.config.js 中有配置),先交给 md-loader 处理,提取其中的 vue 代码,然后交给 vue-loader 去处理,最后渲染到页面形成组件 demo + 文档。demo-style
组件页面中显示的 组件 demo 的排版样式,和组件自身的样式无关,就像你业务代码中给组件定义排版样式一样。因为组件在有些场景下直接显示效果不好,所以就需要经过一定的排版,比如 button 页面、icon 页面等。
components
官网项目存放一些全局组件的目录。
assets
官网项目的静态资源目录
组件库
element 组件库由两部分组成:
/src
和/packages
。src
利用模块化的开发思想,把组件依赖的一些公共模块放在
/src
目录下,并依据功能拆分出以下模块:部分组件
的翻译文件/src/index.js
是通过脚本/build/bin/build-entry.js
脚本自动生成,是组件库的入口。负责自动导入组件库的所有组件、定义全量注册组件库组件的 install 方法,然后导出版本信息、install 和 各个组件。为了减少篇幅,只贴出文件的一部分,但足以说明一切。
/packages
element 将组件全部都放在了
/packages
目录下,每个组件以目录为单位,目录结构以及其中的基本代码是通过脚本/build/bin/new.js
自动生成的。目录结构为:比如新建的 city 组件的目录及文件是这样的:
city
index.js
src
main.vue
其实
/packages
目录下除了组件之外,还有一个特殊的目录theme-chalk
,它是组件库的样式目录,所有组件的样式代码都在这里,element 的组件文件中没有定义样式。theme-chalk
目录也是一个项目,通过gulp
打包,并支持独立发布,其目录结构是这样的:theme-chalk
src,组件样式的源码目录
.gitignore
gulpfile.js
package.json
README.md
测试
组件库的测试项目,使用
karma
框架类型声明
每个组件的类型声明文件,TS 项目使用组件库时有更好的代码提示。
结束
到这里 element 的源码架构分析就结束了,建议读者参照文章,亲自去阅读框架源码并添加注释,这样理解会更深,也更利于后续工作的开展。下一篇将详细讲解
基于 Element 为团队打造组件库
的过程。链接
感谢各位的:点赞、收藏和评论,我们下期见。
当学习成为了习惯,知识也就变成了常识。感谢各位的 点赞、收藏和评论。
新视频和文章会第一时间在微信公众号发送,欢迎关注:李永宁lyn
文章已收录到 github,欢迎 Watch 和 Star。
The text was updated successfully, but these errors were encountered: