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

目录

  • 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 目录

  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.jsonmain,入口文件。

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

以上。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/633822.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue2 -- 截图工具html2canvas

文章目录 🍉需求描述🍉基础功能实现🍉下载另存为本地图片功能🍉需求描述 可以将网页中的指定元素或整个页面截取为图片,以便保存或分享。 🍉基础功能实现 在 Vue 中使用 html2canvas 实现 1:安装 html2canvas 库。你可以使用 npm 安装,命令如下: npm install …

K8S-YAML

一、Kubernetes对象的描述 kubernetes中资源可以使用YAML描述(如果您对YAML格式不了解,可以参考YAML语法),也可以使用JSON。其内容可以分为如下四个部分: typeMeta:对象类型的元信息,声明对象…

一款开源且不限制大小可以设置过期时间的支持分享的的开源文件共享系统picoshare 部署教程

1.拉取镜像 2.部署 创建目录 mkdir -p /opt/picoshare/data 部署 其中:"somesecretpass"是密码 docker run \--env "PORT4001" \--env "PS_SHARED_SECRETsomesecretpass" \--publish 10005:4001/tcp \--volume "/opt/picoshare/data:…

最优解-最长公共子序列

问题描述 最长公共子序列(Longest Common Subsequence,LCS)即求两个序列最长的公共子序列(可以不连续)。比如3 2 1 4 5和1 2 3 4 5两个序列,最长公共子序列为2 4 5 长度为3。解决这个问题必然要使用动态规划。既然要用到动态规划,就要知道状…

oracle11g的闪回技术-闪回表-时间戳

--数据库闪回表 --1创建表(登录模式system) CREATE table dept2 as select * from dept;--此语句如果加上where条件可用于工作中数据的临时备份 select * from dept2;--查询新建表信息 --进入sql>set time on 通过时间点闪回 记录弹出的时间点&#…

certificate-transparency-go用例

文章目录 证书的SCT列表验证SCT依赖包加载证书初始化log机构信息离线验证在线验证 证书的SCT列表 浏览器对证书链的合法性检查通过后,会再检查服务端证书附件里的SCT列表(Signed Certificate Timestamp); 浏览器内置了一批certif…

Tmux教程

会话(session)、窗口(window)、窗格(panel)的概念 参考资料:Tmux 使用教程 - 阮一峰的网络日志 (ruanyifeng.com) 命令行的典型使用方式是,打开一个终端窗口(terminal …

MySQL的安装和部署

2.0 描述 仅仅是一个产品,Oracle旗下的小型数据库。广泛应用在中小型项目中,特征体积小速度快整体成本低。尤其是开源,所以很多中小型项目为了降低成本纷纷选用MySql作为数控存储介质。 2.1 MySql的特征 底层语言使用C、C编写的。并且使用多…

Acrel-1000DP分布式光伏系统在某重工企业18MW分布式光伏中应用

摘 要:分布式光伏发电特指在用户场地附近建设,运行方式以用户侧自发自用、余电上网,且在配电系统平衡调节为特征的光伏发电设施,是一种新型的、具有广阔发展前景的发电和能源综合利用方式,它倡导就近发电,就…

一张图描述Http常用状态码(301、302、305、404、408等等)

301—永久移动。被请求的资源已被永久移动位置; 302—请求的资源现在临时从不同的 URI 响应请求; 305—使用代理。被请求的资源必须通过指定的代理才能被访问; 307—临时跳转。被请求的资源在临时从不同的URL响应请求; 40…

抖音VR直播新玩法,凸显各行业领域商业价值

抖音近期新推出了VR直播新玩法,用户不需要佩戴专业的显示头盔,只需要左右摇晃旋转手机,即可通过手机看到主播的全景直播。其实,VR直播并不是一个新东西,几年前,明星演唱会也用过VR直播拍摄技术,…

网站会遇到的几种攻击类型,及如何防御

随着互联网的普及和人们对网络使用的增加,网站安全问题变得越来越突出。无论是个人还是企业,都需要了解并采取措施来保护自己的网站和用户数据的安全。本文介绍了几种常见的网站安全攻击方式、潜在危害及其预防措施,帮助全面了解网站安全的各…

达梦数据库增删改查常用操作及-2723: 仅当指定列列表,且SET IDENTITY_INSERT为ON时,才能对自增列赋值问题修复

创建表 CREATE TABLE DICT ( "ID" INT IDENTITY(1, 1) NOT NULL, "TYPE" VARCHAR(30), "CODE" BIGINT, "NAME" VARCHAR(300), "VALUE" VARCHAR(200), "DESCRIPTION" VARCHAR(255), "OPERATOR"…

AI在检验数据方面的应用场景-九五小庞

AI在检验数据方面有广泛的应用前景,主要体现在以下几个方面: 自动化数据收集和分析:AI可以通过自动化技术,收集各种检验数据,如血液、尿液、生化指标等,并进行快速、准确的分析,提高检验效率。…

canvas绘制图形

目录 1、canvas绘制矩形 2、canvas绘制线 3、canvas绘制圆 4、canvas绘制多圈动画圆 HTML5<canvas>元素用于图形的绘制&#xff0c;Canvas API主要聚焦于2D图形。 1、canvas绘制矩形 canvas是一个二维网格&#xff0c;左上角坐标为(0,0)&#xff0c;横轴为x轴&…

【笔记】KaiOS OTA APN 方案(OMADM)

一、【需求】功能逻辑 OMADM 机制根据节点信息修改对应的APN&#xff0c;因此代码也通过Node消息管控实现。 _listenOpApnSettingsopCheckIsInProgressAndSaveNodeValuesaveAndUpdateApnValue this.operatorVariantHandlers[simslot.index].applySettings(mcc, mnc/*, false*…

C#,入门教程(38)——大型工程软件中类(class)修饰词partial的使用方法

上一篇&#xff1a; C#&#xff0c;入门教程(37)——优秀程序员的修炼之道https://blog.csdn.net/beijinghorn/article/details/125011644 一、大型&#xff08;工程应用&#xff09;软件倚重 partial 先说说大型&#xff08;工程应用&#xff09;软件对源代码的文件及函数“…

用 Python 制作可视化 GUI 界面,一键实现证件照背景颜色的替换

今天&#xff0c;我们来分享一下如何通过Python的十来行代码来替换证件照的背景颜色&#xff0c;那么在最后&#xff0c;小编也会将上述的流程制作成一个GUI界面来方便大家使用。关于界面的大致模样其实和先前的相差不大&#xff0c;大家应该都看过上一篇的内容 界面大体的样子…

实战-ApacheSuperset未授权访问漏洞(CVE-2023-27524)

声明&#xff1a; 该文章仅供网络安全领域的学习使用&#xff0c;请勿利用文章内的相关技术从事任何非法行为。 测试资产为国外 IP&#xff0c;存在漏洞的 IP 地址已做打码处理。 我们只进行 poc&#xff0c;请勿进行任何非法入侵和攻击。 知攻善防&#xff0c;遇强则强。 开发…

MYSQL索引实例

1.用SQL语句创建学生表student&#xff0c;定义主键&#xff0c;姓名不能重名&#xff0c;性别只能输入男或女&#xff0c;所在系的默认值是“计算机”。 mysql> create table student(-> Sno int primary key auto_increment,-> Sname varchar(255) not null unique…