element-ui 打包流程源码解析(上)

目录

分析版本为 element-ui,v2.15.9

1,源码整体结构

1.1,build 目录

打包目录,包括所有的打包配置 webpack 等 js 文件。

1.2,examples 目录

element-ui 官网的源代码,是一个独立的 vue2 项目。通过脚本 build/webpack.demo.js 打包。

1.3,packages 目录

  1. 每个组件都是一个单独的文件夹。
  2. 组件对应的样式没有写在 .vue 文件中,而是统一在 packages/theme-chalk 目录,该目录是单独打包的,也可单独发版。

1.4,src 目录

  1. 基于模块化开发的思想,把组件使用到了依赖,和一些公共模块放在该目录下,并依据功能拆分出以下模块:
    1. utils,定义一些工具方法。
    2. transition,动画。
    3. mixins,全局混入的一些方法。
    4. local,国际化功能以及各种语言的部分组件的翻译文件。
    5. directives,指令。
  2. /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.jsonmain,入口文件。

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 打包流程解析(下)- 目录结构和使用

以上。

相关推荐
Apifox5 分钟前
如何在 Apifox 中通过 Runner 运行包含云端数据库连接配置的测试场景
前端·后端·ci/cd
麦麦大数据28 分钟前
neo4j+django+deepseek知识图谱学习系统对接前后端分离前端vue
vue.js·django·知识图谱·neo4j·deepseek·在线学习系统
树上有只程序猿33 分钟前
后端思维之高并发处理方案
前端
庸俗今天不摸鱼1 小时前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
黄毛火烧雪下1 小时前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox1 小时前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞1 小时前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行1 小时前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox
m0_593758101 小时前
firefox 136.0.4版本离线安装MarkDown插件
前端·firefox
掘金一周2 小时前
金石焕新程 >> 瓜分万元现金大奖征文活动即将回归 | 掘金一周 4.3
前端·人工智能·后端