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

以上。

相关推荐
Devil枫28 分钟前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦1 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子2 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山2 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享2 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
程序媛小果3 小时前
基于java+SpringBoot+Vue的旅游管理系统设计与实现
java·vue.js·spring boot
从兄3 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
凉辰4 小时前
设计模式 策略模式 场景Vue (技术提升)
vue.js·设计模式·策略模式
清灵xmf4 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨4 小时前
VUE+Vite之环境文件配置及使用环境变量
前端