目录
- 1,源码整体结构
- 1.1,build 目录
- 1.2,examples 目录
- 1.3,packages 目录
- 1.4,src 目录
- 2,打包整体流程
- 2.1,npm run build:file
- 2.1.1,build/bin/iconInit.js
- 2.1.2,build/bin/build-entry.js
- 2.1.3,build/bin/i18n.js
- 2.1.4,build/bin/version.js
- 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.6,npm run build:umd
- 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.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
中的命令进行分析:
{"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 图标对应的类名。
["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
生成内容:版本号集合。
{"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
,组件库路径集合。
{"pagination": "./packages/pagination/index.js","dialog": "./packages/dialog/index.js",// ...
}
输出目录:
-- lib-- pagination.js-- dialog.js-- ...
2.5,npm run build:utils
目标文件:src
目录下除 index.js
。
-- src-- directives-- locale-- mixins-- transitions-- utils-- index.js // 不包括这个。
生成目录:都打包到 lib 目录下,打包为 commonjs
模块。
-- lib-- directives-- locale-- mixins-- transitions-- utils
需要的注意的是:babel 打包时指定了别名。
在源文件中,引用的路径:
import { once, on } from 'element-ui/src/utils/dom';
打包后,为了在 lib 目录中得到正确的引用路径。
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
,目录下是多语言的翻译文件——组件需要使用的翻译。
-- src-- es.js-- zh-CN.js// ...
生成目录
-- lib-- umd-- locale-- es.js-- zh-CN.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
文件。
// 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
-- 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
目录下。
-- 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 打包流程解析(下)- 目录结构和使用。
以上。