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 中的命令进行分析：

{
  "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 打包流程解析（下）- 目录结构和使用。

以上。

代码007普通

打赏 收藏 海报 链接