代码改变世界

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

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

0x.00 📢 前言

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

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

前文对项目目录结构、package.json、npm 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-CN、en-US、es、fr-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.json、page.json、route.json、nav.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组件库汇总