2.3 项目构建

📁 build/

原文地址： https://juejin.cn/post/6969933702759940133

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

components.json

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

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

🔧 项目构建 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.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
更新 nav.config.json，添加新组件导航信息（组件菜单下左侧的二级导航）

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

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 。

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