0x00 前言

在工程化系列文章中介绍了项目构建、代码开发、分支管理、自动化测试、持续集成、项目部署、性能等内容。涉及到繁多的命令、工作流程、依赖文件。下面将通过图解的方式更加直观的说明其工作流，耐心读完，相信会对您有所帮助。

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

1️⃣ 工程化剖析：项目概览、package.json、npm script
2️⃣ 工程化剖析：项目构建、MD解析
3️⃣ 工程化剖析：打包配置
4️⃣ 工程化剖析：发布部署、持续集成
5️⃣ 工程化剖析：主题构建、自动化测试、代码质量检查、类型声明
6️⃣ 工程化剖析：项目网站
7️⃣ 工程化剖析：命令之图解

本专栏的 gitbook 版本地址已经发布 📚《learning element-ui》，内容同步更新中！

0x01 文件构建

npm run i18n

执行 node build/bin/i18n.js，基于 examples/i18n/page.json 各页面及国际化配置、 examples/pages/template 目录下的所有模版文件，在目录examples/pages/{lang}下生成 zh-CN、en-US、es、fr-FR 等四种语言的网站.vue文件。

npm run build:file

执行命令后，并行执行多个任务生成文件

执行 node build/bin/iconInit.js ，使用 postcss 解析 packages/theme-chalk/src/icon.scss，提取所有 icon 名字生成 examples/icon.json 图标集合文件。 icon.json 在官网入口文件examples\entry.js 中导入，挂载到 Vue.prototype。用于Icon图标文档页生成所有的图标集合。

执行 node build/bin/build-entry.js，基于组件清单文件components.json结合字符串模版库json-templater/string自动生成 src/index.js 组件库入口文件。

执行 node build/bin/i18n.js 生成官网的多语言网站文件,详见命令 npm run i18n 介绍。

执行 node build/bin/version.js 获取package.json中 version版本号，生成 examples/version.json项目版本列表信息，用于网站版头部导航版本切换。

npm run build:theme

用于项目的主题和样式生成。

1️⃣ 生成入口文件

node build/bin/gen-cssfile 找到 components.json，获取组件列表，找到packages/theme-chalk/src目录下对应的各组件的 component-name.scss 文件，以@import "./component-name.scss"的形式，写入packages/theme-chalk/index.scss文件-样式总入口文件。若是组件对应的样式不存在，会自动创建遗漏的样式文件。

2️⃣ 构建主题

gulp build --gulpfile packages/theme-chalk/gulpfile.js 会执行 gulpfile.js 定义两个任务(task):

将packages/theme-chalk/src目录下的 scss 文件转换成 css 文件，经过浏览器兼容、压缩处理，输出至packages/theme-chalk/src/lib目录下;
将packages/theme-chalk/src/fonts目录下的字体图标文件压缩处理，输出至 packages/theme-chalk/src/lib/fonts 目录下。

3️⃣ 拷贝至lib/theme-chalk下

通过cp-cli，将packages/theme-chalk/src/lib目录下文件拷贝至lib/theme-chalk目录下。

npm run build:utils

把 src 目录下除了 src/index.js 文件外的其他文件通过 babel 转译后，输出至 lib 文件夹下。

npm run build:umd

执行 node build/bin/build-locale.js ,遍历 src/locale/lang 目录下所有JS文件，通过 babel 转译成 umd 格式，输出至 lib/umd/locale 目录下。

0x02 开发模式

npm run dev

首先，执行命令npm run bootstrap 安装项目依赖，初始化开发环境。
其次，执行命令npm run build:file 构建网站相关文件，详见上文命令介绍。
最后，运行webpack-dev-server 提供一个本地服务(serve) ，编译运行项目网站(打包规则配置 build/webpack.demo.js, 模式是development，入口文件是examples/entry.js);同时执行 node build/bin/template.js 文件启动chokidar监听 examples/pages/template 目录下模板文件，若内容发生变化，执行命令 npm run i18n 重新生成网站文件。

webpack-dev-server 具有 live reloading 功能,网站文件变更会重新编译加载。

npm run dev:play

首先，执行命令npm run build:file 构建网站相关文件，详见上文命令介绍。
其次，运行webpack-dev-server 提供一个本地服务(serve) ，编译运行项目网站(打包规则配置 build/webpack.demo.js)。

命令中设置环境变量 NODE_ENV=development PLAY_ENV=true,打包入口文件为 examples/play.js, 该文件引用 examples/play/index.vue, 用于组件库功能展示。

npm run dev:extension

chorme 插件项目开发调试 ,首先 rimraf examples/extension/dist 清除项目上次打包构建内容，然后使用 webpack 打包构建项目，配置文件build/webpack.extension.js, 入口文件为examples/extension/src/background.js和examples/extension/src/entry.js。使用 watch 模式,若开发中文件发生变化，则重新打包.

0x03 项目构建

npm run deploy:extension

与命令npm run dev:extension相似，使用同一打包配置文件，相同的入口文件。不同之处基于 production 模式对应规则进行打包,没有使用 watch 模式。

npm run deploy:build

首先，执行命令npm run build:file 构建网站相关文件，详见上文命令介绍。
其次，执行webpack --config build/webpack.demo.js 基于 production 模式，打包生成内容输出至examples/element-ui/目录下。最后将项目域名element.eleme.io写入 examples/element-ui/CNAME 文件中。

npm run dist

执行命令npm run clean,清除打包/测试生成的目录及文件;
执行命令npm run build:file,详见上文;
执行命令npm run lint,详见上文;
执行打包webpack --config build/webpack.conf.js,入口文件 src/index.js 以 umd 格式输出到 lib/index.js;
执行打包webpack --config build/webpack.common.js,入口文件 src/index.js 以commonjs2格式输出到 lib/element-ui.common.js;
执行打包webpack --config build/webpack.component.js,入口文件 components.json,将packages目录下的组件，以commonjs2格式分别输出到lib目录,用于按需引入;
执行命令npm run build:utils ,详见上文;
执行命令npm run build:umd ,详见上文;
执行命令npm run build:theme,详见上文。

npm run pub

执行命令npm run bootstrap,安装依赖环境;
运行shell脚本sh build/git-release.sh ，检查代码 dev 分支是否存在冲突(No conflicts);
运行shell脚本sh build/release.sh,合并dev分支到master分支、更新版本号、发布主题、push代码到远程仓库、发布组件库至NPM;
执行文件node build/bin/gen-indices.js,提供 algoliasearch 搜索功能，需要把 examples/docs 目录下 .md 文件内容格式化后上传 algolia。

0x04 make 命令

Makefile 文件描述了项目的构建规则，它用来自动化构建项目。一旦写编写好 Makefile 文件，只需要一个 make 命令(也可直接执行对应npm script命令)，整个工程就开始自动构建。输入 make target 命令后，找到 target 对应的 commond 执行。

关注专栏

如果本文对您有所帮助请关注➕、点赞👍、收藏⭐！您的认可就是对我的最大支持！

此文章已收录到专栏中 👇，可以直接关注。

07.Element UI 项目工程化剖析之命令图解