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 功能详解。
0x.02 🔧 项目构建 build/bin
build/bin/build-entry.js
生成组件库入口文件src/index.js。基于组件清单文件components.json结合字符串模版库json-templater/string自动生成 。当组件清单变更时勿需手动更新文件，只要运行该文件自动生成最新文件覆盖更新。
build/bin/build-locale.js
通过 babel 处理 src/locale/lang 目录下的翻译文件，生成 umd 格式文件，输出至 lib/umd/locale 目录下。
build/bin/gen-cssfile.js
生成 packages/theme-chalk/index.scss 样式总入口文件。全量引入组件时，引用改样式如下 import 'packages/theme-chalk/src/index.scss' 。
build/bin/gen-indices.js
使用 algoliasearch 轻松实现文档全站搜索。
以button页面为例，提取后的页面索引内容如下 👇。
build/bin/i18n.js
用于项目官网的国际化。基于 examples/i18n/page.json 国际化配置和 examples/pages/template 目录下的所有模版文件，生成 zh-CN、en-US、es、fr-FR等四种语言的.vue文件。
build/bin/iconInit.js
使用 postcss 解析 icon.scss，提取所有 icon 名字生成 examples/icon.json 文件。
icon.json 在官网入口文件examples\entry.js 中导入，挂载到 Vue.prototype。 用于Icon图标文档页生成所有的图标集合，详见下图 👇。
import icon from './icon.json';
Vue.prototype.$icon = icon; // Icon 列表页用
build/bin/new-lang.js
为网站添加新语言。例如 'make new-lang fr' ，添加新语言配置至 components.json、page.json、route.json、nav.config.json等文件中，配置默认复制en-US语言设置，新建对应文件夹 examples/docs/fr。
build/bin/new.js
创建新组件 package，自动创建组件相关文件和初始组件的全局配置信息。 例如 'make new button 按钮',步骤如下：
- 创建的新组件添加至组件清单
components.json中。 - 主题样式入口文件
packages/theme-chalk/src/index.scss添加组件导入语句。 - 在
types/element-ui.d.ts自动引入新组件类型声明。 - 创建 package :
创建组件文件packages/button/index.jspackages/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 - 更新nav.config.json，添加新组件导航信息（组件菜单下左侧的二级导航）
build/bin/template.js
用于监听examples/pages/template目录下模板文件是否发生改变，若存在变化会自动执行命令npm run i18n，运行文件build/bin/i18n.js，重新生成网站文件。
build/bin/version.js
生成 examples/version.json 记录项目库版本信息。
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 。
用于网站版头部导航版本切换👇。
0x.03 🔄 .MD解析转换 build/md-loader
webpack 使用自定义的 markdown-loder对文件进行处理，将 组件文档.md 编译为 HTML。已在前文 04.封装组件封装、编写说明文档 中详细说明,不再过多赘述。
👋👋 受制于篇幅的问题，本文到此就结束了！后续文章将会继续分析学习工程化实践。
0x.04 🔖 链接汇总
点击以下链接，可以快速查看本系列其他文章：