目录
- 1,源码整体结构
-
- [1.1,build 目录](#1.1,build 目录)
- [1.2,examples 目录](#1.2,examples 目录)
- [1.3,packages 目录](#1.3,packages 目录)
- [1.4,src 目录](#1.4,src 目录)
- 2,打包整体流程
-
- [2.1,npm run build:file](#2.1,npm run build:file)
- 2.2,build/webpack.conf.js
- 2.3,build/webpack.common.js
- 2.4,build/webpack.component.js
- [2.5,npm run build:utils](#2.5,npm run build:utils)
- [2.6,npm run build:umd](#2.6,npm run build:umd)
- [2.7,npm run build:theme](#2.7,npm run build:theme)
-
- 2.7.1,build/bin/gen-cssfile
- [2.7.2,gulp build --gulpfile packages/theme-chalk/gulpfile.js](#2.7.2,gulp build --gulpfile packages/theme-chalk/gulpfile.js)
- [2.7.3,cp-cli packages/theme-chalk/lib lib/theme-chalk](#2.7.3,cp-cli packages/theme-chalk/lib lib/theme-chalk)
分析版本为 element-ui,v2.15.9。
1,源码整体结构
1.1,build 目录
打包目录,包括所有的打包配置 webpack 等 js 文件。
1.2,examples 目录
element-ui 官网的源代码,是一个独立的 vue2 项目。通过脚本 build/webpack.demo.js
打包。
1.3,packages 目录
- 每个组件都是一个单独的文件夹。
- 组件对应的样式没有写在
.vue
文件中,而是统一在packages/theme-chalk
目录,该目录是单独打包的,也可单独发版。
1.4,src 目录
- 基于模块化开发的思想,把组件使用到了依赖,和一些公共模块放在该目录下,并依据功能拆分出以下模块:
- utils,定义一些工具方法。
- transition,动画。
- mixins,全局混入的一些方法。
- local,国际化功能以及各种语言的部分组件的翻译文件。
- directives,指令。
/src/index.js
是组件库入口文件,是通过脚本/build/bin/build-entry.js
自动生成。- 负责自动导入组件库的所有组件。
- 定义全量注册组件库组件的
install
方法。 - 导出版本信息、
install
和 各个组件。
2,打包整体流程
从 package.json
中的命令进行分析:
json
{
"scripts": {
"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",
"build:file": "node build/bin/iconInit.js & node build/bin/build-entry.js & node build/bin/i18n.js & node build/bin/version.js",
"build:utils": "cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js",
"build:umd": "node build/bin/build-locale.js",
"build:theme": "node build/bin/gen-cssfile && gulp build --gulpfile packages/theme-chalk/gulpfile.js && cp-cli packages/theme-chalk/lib lib/theme-chalk",
}
}
npm run dist
就是打包命令,配置的其他命令为它服务。
2.1,npm run build:file
2.1.1,build/bin/iconInit.js
目标文件:packages/theme-chalk/src/icon.scss
生成目录:examples/icon.json
生成内容:提取了所有的 icon 图标对应的类名。
json
["platform-eleme","eleme","delete-solid","delete","s-tools","setting"]
2.1.2,build/bin/build-entry.js
目标文件:components.json
生成目录:src/index.js
生成内容:组件库的入口文件。
2.1.3,build/bin/i18n.js
目标文件:examples/i18n/page.json
+examples/pages/template
生成目录:examples/pages
下,每种语言对应一个文件夹。
生成内容:官网项目页面的vue文件。
2.1.4,build/bin/version.js
将 package.json
中的当前版本信息,添加到已有 version
集合中。
生成目录:examples/versions.json
生成内容:版本号集合。
json
{"1.4.13":"1.4","2.0.11":"2.0","2.1.0":"2.1"}
2.2,build/webpack.conf.js
作用:全量打包组件库为 umd 模块。可通过 script 标签引入组件库来使用。
入口文件:src/index.js
生成目录:lib/index.js
2.3,build/webpack.common.js
作用:全量打包为 commonjs2
模块。可通过 npm 下载组件库来使用。
入口文件:src/index.js
生成目录:lib/element-ui.common.js
。也就是 package.json
的 main
,入口文件。
2.4,build/webpack.component.js
作用:为实现组件库的按需加载,将每个组件模块单独打包。
入口文件:components.json
,组件库路径集合。
json
{
"pagination": "./packages/pagination/index.js",
"dialog": "./packages/dialog/index.js",
// ...
}
输出目录:
json
-- lib
-- pagination.js
-- dialog.js
-- ...
2.5,npm run build:utils
目标文件:src
目录下除 index.js
。
json
-- src
-- directives
-- locale
-- mixins
-- transitions
-- utils
-- index.js // 不包括这个。
生成目录:都打包到 lib 目录下,打包为 commonjs
模块。
json
-- lib
-- directives
-- locale
-- mixins
-- transitions
-- utils
需要的注意的是:babel 打包时指定了别名。
在源文件中,引用的路径:
js
import { once, on } from 'element-ui/src/utils/dom';
打包后,为了在 lib 目录中得到正确的引用路径。
js
exports.__esModule = true;
var _dom = require('element-ui/lib/utils/dom');
2.6,npm run build:umd
node build/bin/build-locale.js
目标文件:src/locale/lang
,目录下是多语言的翻译文件------组件需要使用的翻译。
json
-- src
-- es.js
-- zh-CN.js
// ...
生成目录
-- lib
-- umd
-- locale
-- es.js
-- zh-CN.js
// ...
并且替换了部分内容
js
(function (global, factory) {
if (typeof define === "function" && define.amd) {
// 原:define('zh-CN', ['module', 'exports'], factory);
define('element/locale/zh-CN', ['module', 'exports'], factory);
} else if (typeof exports !== "undefined") {
factory(module, exports);
} else {
var mod = {
exports: {}
};
factory(mod, mod.exports);
// 原:global.zhCN = mod.exports;
global.ELEMENT.lang = global.ELEMENT.lang || {};
global.ELEMENT.lang.zhCN = mod.exports;
}
})(this, function (module, exports) {
// 被打包文件的内容
}
作用:使用 babel 将目标文件打包为 umd 模块。可以看到替换了 root 环境下的内容。
2.7,npm run build:theme
作用:打包 scss 和 字体文件。
2.7.1,build/bin/gen-cssfile
作用:创建 packages/theme-chalk/src/index.scss
,并引入 packages/theme-chalk
目录下所有组件的 scss
文件。
css
// index.scss
@import "./base.scss";
@import "./pagination.scss";
@import "./dialog.scss";
@import "./autocomplete.scss";
// ...
2.7.2,gulp build --gulpfile packages/theme-chalk/gulpfile.js
目标文件:packages/theme-chalk/src
目录下所有 scss
文件和 fonts
目录下的字体文件
生成目录:packages/theme-chalk/lib
json
-- packages/theme-chalk/lib
-- fonts
// 2个字体.tff
-- alert.css
-- aside.css
// ...其他组件 css 文件
2.7.3,cp-cli packages/theme-chalk/lib lib/theme-chalk
将上面生成的 css 和字体文件复制到 lib/theme-chalk 目录下。
至此,npm run dist
命令执行完毕,输出都在 lib
目录下。
json
-- lib
-- directives
-- locale
-- mixins
-- transitions
-- utils
-- theme-chalk
-- fonts
-- alert.css
// ...
-- umd
-- locale
-- es.js
-- zh-CN.js
// ...
-- pagination.js
-- dialog.js
-- ...
-- element-ui.common.js
-- index.js
和 element 官网 介绍使用的 CDN 下的 lib 目录一致。
和我们通过 npm 下载的 element-ui 的 node_modules/element-ui/lib
一致。
为什么要这样打包,参考 element-ui 打包流程解析(下)- 目录结构和使用。
以上。