element源码解析--打包构建_elementui 源码打包demo

前言

本篇文章主要对 element 框架的 build 目录 及 package.json 中的 scripts 脚本，也就是element项目的脚本构建打包进行解析。

element 的打包构建

废话不多说，先来张图：

对于node项目，除了对整体结构的浏览，第一步要做的事，就是查看项目的核心文件，package.json。由于本篇主讲scripts，需要了解其他字段的，可在官方文档查看

package.json 官方资料

从上图可以看出，scripts 下很多内容，我们需要关心的主要有两个，一个dist（项目构建，生成打包文件，类似vue-cli 的 npm run build），一个dev（同 vue-cli 的 npm run dev ）

先看dist

	"dist": "npm run clean && 
			   npm run build:file && 
			   npm run lint && 
			   webpack --config build/webpack.conf.js &&
			   webpack --config build/webpack.common.js && 
			   webpack --config build/webpack.component.js &&
			   npm run build:utils && 
			   npm run build:umd && 
			   npm run build:theme"
1
2
3
4
5
6
7
8
9

把需要执行的命令拆开来看：

1. npm run clean ：执行脚本中的 clean 命令，删除之前打包的文件

"clean": "rimraf lib && rimraf packages/*/lib && rimraf test/**/coverage"
1

2. npm run build:file ：执行脚本中的build:file命令，依次是生成 examples/icon.json；生成 src/index.js；生成 examples/pages下国际化相关vue文件；生成 examples/versions.json；

"build:file": "node build/bin/iconInit.js &  //生成 examples/icon.json
				node build/bin/build-entry.js & //生成 src/index.js
				node build/bin/i18n.js &  //生成 examples/pages下国际化相关vue文件
				node build/bin/version.js //生成 examples/versions.json
1
2
3
4

3. npm run lint ：执行脚本中的lint命令，eslint检查

"lint": "eslint src/**/* test/**/* packages/**/* build/**/* --quiet
1

4. webpack --config build/webpack.conf.js ：webpack打包，lib目录下打包 index.js文件 （浏览器使用的js包）.
5. webpack --config build/webpack.common.js ：webpack打包，lib目录下生成element-ui.common.js 文件（node下使用的文件，对应 package.json 中的 main 字段）
6. webpack --config build/webpack.component.js ：webpack打包，lib下生成组件的 js 文件
7. npm run build:utils ：执行 build:utils 命令 ，babel 打包src目录下文件至lib，忽略index.js

"build:utils": "cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js
1

8. npm run build:umd ：执行 build:umd 命令 ，lib/locale下生成国际化相关文件

"build:umd": "node build/bin/build-locale.js
1

9. npm run build:theme：执行 build:theme 命令 ，生成样式

"build:theme": "node build/bin/gen-cssfile && 
				gulp build --gulpfile packages/theme-chalk/gulpfile.js && 
				cp-cli packages/theme-chalk/lib lib/theme-chalk
1
2
3

再看dev

	"dev": "npm run bootstrap && 
		    npm run build:file &&
		    cross-env NODE_ENV=development webpack-dev-server --config build/webpack.demo.js & 
		    node build/bin/template.js ",
1
2
3
4

还是拆开看：

1. 安装包；
2. 生成index.js
3. webpack 启动
4. tpl后缀模板文件的处理

结语

除了打包构建部分，其他部分有相关的文章，我就不复制粘贴了。请看：

Element源码解析–整体介绍