最近参与基于Vue的Element Store前端组件库维护工作，顺便研究了其在工程化管理方面的特点；本篇文章将围绕以下三点来进行解读（以下内容是我个人的学习与总结，如有不全或错误的地方，欢迎评论指正，谢谢大家）：

1. 脚本命令的作用是什么？
2. 组件库Demo工程的文档是如何维护以及运行的？
3. 组件库如何发包部署的？

说明：Element Store是服务于海店项目的组件库，是基于Element UI组件库进行的私有化定制开发

一、工程目录结构

图1-目录概览

二、运行命令

在package.json的scripts属性中，列出了该工程的开发及部署的所有脚本命令，这些命令以及命令的组合各司其职，共同串联起了复杂的工程目录；接下来我们选择几个重要的命令组来进行说明，了解其工作原理。先看一下命令列表：

图2-脚本命令概览

命令组1：npm run build:file

该命令组的作用是动态更新Demo工程的相关依赖文件，包括组件库图标配置文件、版本列表文件、及其Demo工程一级路由组件文件。见下表:

图3-命令组1

命令组2：npm run build:theme

该命令组的作用是动态更新样式集入口文件(@import方式引入子组件的样式文件)，并且进行样式的打包编译操作(输出到/lib目录下)。见下表:

图4-命令组2

说明：Element UI组件库对样式文件单独采用了工程管理，且采用gulp对样式进行编译打包，目的是在进行发包部署的时候，可以单独对样式包进行发包操作，方便开发者只下载样式包，使用其样式，类似于bootstrap。

命令组3：npm run deploy:build

该命令组的作用是Demo工程的一个本地打包操作。见下表:

图5-命令组3

命令组4：npm run deploy

该命令组的作用是发布Demo工程至指定仓库。见下表:

图6-命令组4

命令组5：npm run dev

该命令组的作用是更新Demo工程相关配置文件并启动本地开发环境。见下表：

图7-命令组5

命令组6：npm run dist

该命令组的作用是组织发包的必要文件，包括组件集入口文件更新、对组件集入口文件进行UMD和CommonJS编译、对各个组件进行CommonJS编译、对element组件库依赖的各个工具进行编译、编译样式文件。见下表：

图8-命令组6

命令组7：npm run pub

该命令组的作用是Git开发分支检查与发包操作，包括发布主包与发布样式包。见下表：

图9-命令组7

三、本地开发

Element UI组件库的Demo工程其实是对markdown文档的组织管理并将其编译为vue组件的过程。

1.如何开发新组件

组件库采用自动化管理，新组件的开发不用逐个创建目录以及文件内容，可以采用命令行一步生成，包括组件相关的目录结构、文件初始化、配置更新等。

图10-开发新组件流程

2.本地开发环境

本地化开发采用webpack的开发编译。

图11-启动开发环境

3.markdown文件的解析编译

此编译过程利用了webpack的优势，即所有资源皆模块，只需使用正确的loader对其进行解析，markdown文件同样如此。这里的主要操作是:

• 拦截经过loader的数据流，首先对其进行markdown的标准语法转化，生成html的文件流
• 提取预先定义好的语法容器内容(eg: ':::demo {content} :::')，将其使用准备好的组件进行包裹(eg: '<demo-block />')，形成vue组件嵌套
• 将<template />内的案例脚本采用抽象语法树的形式，在本组件页面的components属性中进行子组件注册
• 组装本组件页面的vue结构

图12-解析.md文件流程

四、版本发布

代码编译后就是发布过程，Element UI组件库中采用shell脚本实现发布，主要涉及三个方面：Git发布、NPM发布与官网发布。

1.Git发布&NPM发布

图13-Git发布与NPM发布

2.官网发布

图14-官网发布

五、总结

工程化：

• 多工具的配合使用(eg：webpack/gulp/shell等)
• 开发自动化：利用上述工具达到本地开发自动化，基础配置文件以及组件集文件采用动态生成或更新，降低人为介入
• 发布自动化：通过运行一系列的 shell 脚本，实现了代码的提交、合并、版本管理、npm 发布、官网发布等，让整个发布流程自动化完成

借鉴点：

• 参考对.md文件的解析过程，可以根据自己的需要自定义loader，对文件流进行处理，输出满足业务需求的处理结果
• 自行编写脚本实现初始化工作，比如新增某个功能模块，利用脚本自动生成所属的目录结构以及组件基础内容并同步更新相关配置文件(eg：Angular框架的相关命令ng g component/ng g service等)
• 充分利用各种工具，在项目中进行相关的操作，提升开发效率(eg：shell脚本、fs模块系统等)
• 类库开发：尽量将js以UMD形式打包，把库暴露给当前使用的模块定义系统，使其和CommonJS、AMD兼容或者暴露为全局变量，保证在各种环境下引包顺利

六、参考资料

1. Webpack：https://webpack.js.org/
2. NPM：https://www.npmjs.com/
3. Markdown：https://markdown-here.com/ & https://zhuanlan.zhihu.com/p/64290806
4. Element贡献指南：https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING.zh-CN.md#%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA
5. package.json配置：http://caibaojian.com/npm/