代码改变世界

07.ElementUI 2.X 源码学习:源码剖析之工程化(二)

2021-06-07 15:28  Anduril  阅读(187)  评论(0编辑  收藏  举报

0x.00 📢 前言

👇 项目工程化系列文章链接如下,推荐按照顺序阅读文章 👇。

1️⃣ 源码剖析之工程化(一):项目概览、package.json、npm script
2️⃣ 源码剖析之工程化(二):项目构建、MD解析
3️⃣ 源码剖析之工程化(三):打包配置

前文对项目目录结构、package.jsonnpm script各命令任务内容和执行过程进行了概述。书接上文,build 目录下定义了许多项目构建脚本和配置(开发,打包,部署,持续集成)。 npm script各命令作为入口,会调用 build 目录中文件,从而自动完成大量重复性工作,从而减少人为错误、提高效率。

下面将继续深入研究工程化流程,对命令中调用的脚本配置逐一分析。

0x.01 📃 components.json

components.json是一份项目完整的组件清单,列出了组件的名称、文件路径,在项目文件构建、 webpack 等多处用到。

components.json文件不是自动生成的,但其清单内容是自动更新的。当使用 make命令创建新组件 package make new <component-name> [中文名] 时自动更新组件清单,具体实现详见下文 build/bin/new.js 功能详解。

image.png

0x.02 🔧 项目构建 build/bin

build/bin/build-entry.js

生成组件库入口文件src/index.js。基于组件清单文件components.json结合字符串模版库json-templater/string自动生成 。当组件清单变更时勿需手动更新文件,只要运行该文件自动生成最新文件覆盖更新。

carbon (30).png

build/bin/build-locale.js

通过 babel 处理 src/locale/lang 目录下的翻译文件,生成 umd 格式文件,输出至 lib/umd/locale 目录下。

carbon (31).png

build/bin/gen-cssfile.js

生成 packages/theme-chalk/index.scss 样式总入口文件。全量引入组件时,引用改样式如下 import 'packages/theme-chalk/src/index.scss'

image.png

build/bin/gen-indices.js

使用 algoliasearch 轻松实现文档全站搜索。

image.png

button页面为例,提取后的页面索引内容如下 👇。

image.png

build/bin/i18n.js

用于项目官网的国际化。基于 examples/i18n/page.json 国际化配置和 examples/pages/template 目录下的所有模版文件,生成 zh-CNen-USesfr-FR等四种语言的.vue文件。

carbon (86).png

build/bin/iconInit.js

使用 postcss 解析 icon.scss,提取所有 icon 名字生成 examples/icon.json 文件。

carbon (32).png

icon.json 在官网入口文件examples\entry.js 中导入,挂载到 Vue.prototype。 用于Icon图标文档页生成所有的图标集合,详见下图 👇。

import icon from './icon.json';
Vue.prototype.$icon = icon; // Icon 列表页用 

image.png

build/bin/new-lang.js

为网站添加新语言。例如 'make new-lang fr' ,添加新语言配置至 components.jsonpage.jsonroute.jsonnav.config.json等文件中,配置默认复制en-US语言设置,新建对应文件夹 examples/docs/fr

carbon (33).png

build/bin/new.js

创建新组件 package,自动创建组件相关文件和初始组件的全局配置信息。 例如 'make new button 按钮',步骤如下:

  1. 创建的新组件添加至组件清单components.json中。
  2. 主题样式入口文件packages/theme-chalk/src/index.scss添加组件导入语句。
  3. types/element-ui.d.ts 自动引入新组件类型声明。
  4. 创建 package :
    创建组件文件 packages/button/index.js packages/button/src/main.vue
    创建多语言组件文档 examples/docs/{lang}/button.md
    创建单元测试文件 test/unit/specs/button.spec.js
    创建组件样式文件 packages/theme-chalk/src/button.scss
    创建组件类型声明文件 types/button.d.ts
  5. 更新nav.config.json,添加新组件导航信息(组件菜单下左侧的二级导航)

image.png

🚨 若项目网站增加了新了语言,需要在Files 数组添加配置硬编码指定语言。

image.png

build/bin/template.js

用于监听examples/pages/template目录下模板文件是否发生改变,若存在变化会自动执行命令npm run i18n,运行文件build/bin/i18n.js,重新生成网站文件。

image.png

build/bin/version.js

生成 examples/version.json 记录项目库版本信息。

image.png

process.env.VERSION 参数的是怎么传入的?

当执行命令 npm run pub 发布组件库时,会执行脚本 build/release.sh,会手动输入发布本信息(read -p "Releasing $VERSION - are you sure? (y/n)" -n 1 -r),然后执行命令 VERSION=$VERSION npm run dist

整个执行顺序 👉 npm run pub=>sh build/release.sh=>输入$VERSION=>VERSION=$VERSION npm run dist=> npm run build:file=> node build/bin/version.js

用于网站版头部导航版本切换👇。

image.png

0x.03 🔄 .MD解析转换 build/md-loader

webpack 使用自定义的 markdown-loder对文件进行处理,将 组件文档.md 编译为 HTML。已在前文 04.封装组件封装、编写说明文档 中详细说明,不再过多赘述。


👋👋 受制于篇幅的问题,本文到此就结束了!后续文章将会继续分析学习工程化实践。

0x.04 🔖 链接汇总

点击以下链接,可以快速查看本系列其他文章:

ElementUI源码学习:从零开始搭建Vue组件库汇总

作者:Anduril

简书传送门:简书/Anduril

掘金传送门:掘金/Andurils

个人小站:anduril.cn

技术只有不沉浸其中才能对其更加公正看待! 没了狂热和浮躁,去体会下开源下的语法魅力!这里没有技术宗教的狂热和鄙夷,没有疯狂的个人崇拜,只是一个技术人探索之路上对于美丽与丑陋的随笔和感悟!

本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。