当前位置: 首页 > news >正文

element-ui 打包流程源码解析——babel 相关

目录

  • 1,babel-cli
  • 2,babel-core
  • 3,.babelrc
    • 3.1,presets
    • 3.2,plugins
    • 其他相关

该文章是为了更好的理解:element-ui 打包流程源码解析(上) 第2.5节 npm run build:utils 打包命令

"scripts": {"build:utils": "cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js",
}

使用 babel 时,默认都会以根目录下的 .babelrc 文件为配置项。

1,babel-cli

官网参考

上面的打包命令作用是:

使用 BABEL_ENV=utils 环境下的配置项,来编译整个 src 目录下的文件并输出到 lib 目录,同时忽略src/index.js

2,babel-core

官网参考

在 build/bin/build-locale.js 中,定义了一个方法,用于将 esm 模块转为 umd 模块。

var transform = function(filename, name, cb) {require('babel-core').transformFile(resolve(localePath, filename), {plugins: ['add-module-exports',['transform-es2015-modules-umd', {loose: true}]],moduleId: name}, cb);
};

3,.babelrc

选项参考,plugins 和 presets 区别

element-ui 的 .babelrc 文件配置。

只看下命令中关于 BABEL_ENV=utils 环境的相关配置:

{// ...// 只看 utils 环境下的配置"env": {"utils": {"presets": [["env",{"loose": true,"modules": "commonjs","targets": {"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]}}],],"plugins": [["module-resolver", {"root": ["element-ui"],"alias": {"element-ui/src": "element-ui/lib"}}]]},// ...}
}

3.1,presets

简单理解为是 plugins 的集合,多个时逆序执行。以上面的配置为例,

语法:添加了1个 preset:env = babel-preset-env(如果没有配置项时会运行所有的 transform)。

env配置项解释:

1,loose: true,参考

开启 loose 模式转换为 es6 --> es5,生成代码更快,老引擎兼容性好,代码简洁。

2,modules: commonjs

启用将ES6模块语法转换为另一种模块类型。 false 表示不会转换目标模块。

3,targets

作用目标,只支持目标范围内浏览器所需的 polyfill 和代码转换。
查询语句是 browserslist 支持的有效的查询格式。<-- 翻译文件

  • 全球使用率 > 1% 的浏览器版本。
  • 每个浏览器最近的两个发行版。
  • ie 大于 8 版本

3.2,plugins

"plugins": [["module-resolver", {"root": ["element-ui"],"alias": {"element-ui/src": "element-ui/lib"}}]
]

module-resolver 对应的是 babel-plugin-module-resolver。

作用:简化路径指定别名

  • 简化路径:在项目中 require/import通过 ../../element-ui/xxx 可以直接写 element-ui/xxx
  • 指定别名:
import { once, on } from 'element-ui/src/utils/dom';

打包后变为

exports.__esModule = true;var _dom = require('element-ui/lib/utils/dom');

其他相关

.babelrc 的完整配置中,还有一个 plugins: transform-vue-jsx,实现在 Vue 中使用 JSX 语法。

感兴趣可以看下:vue jsx | elementFe官方解析。


以上。

相关文章:

element-ui 打包流程源码解析——babel 相关

目录 1&#xff0c;babel-cli2&#xff0c;babel-core3&#xff0c;.babelrc3.1&#xff0c;presets3.2&#xff0c;plugins其他相关 该文章是为了更好的理解&#xff1a;element-ui 打包流程源码解析&#xff08;上&#xff09; 第2.5节 npm run build:utils 打包命令 "…...

听神经瘤的听力学表现

听神经瘤的听力学诊断 听神经瘤的听力学表型多样&#xff0c;听力正常者不能排除听神经瘤&#xff1b;听力损失程度不能预判肿瘤大小&#xff1b;纯音测听与言语识别率不一致应警惕蜗后病变&#xff1b;听性脑干诱发电位诊断听神经瘤敏感度随肿瘤增大而增加。 一&#xff0e;纯…...

C#用DateTime.Now静态属性返回日期的星期信息

目录 一、使用的方法 1.Now属性 2.ToString方法 二、示例 使用DateTime结构的Now静态属性&#xff0c;可以方便地获取系统日期信息。调用时间对象的ToString方法&#xff0c;在该方法的参数中添加适当的格式化字符串&#xff0c;将返回日期的星期信息。 一、使用的方法 1…...

ARMv8-AArch64 的异常处理模型详解之异常类型 Exception types

异常类型详解 Exception types 一&#xff0c; 什么是异常二&#xff0c;同步异常&#xff08;synchronous exceptions&#xff09;2.1 无效的指令和陷阱异常&#xff08;Invalid instructions and trap exceptions&#xff09;2.2 内存访问产生的异常2.3 产生异常的指令2.4 调…...

Linux操作系统概念

绪论​&#xff1a; “心灵纯洁的人&#xff0c;生活充满甜蜜和喜悦。——列夫托尔斯泰”&#xff0c;本章的主要内容是介绍了硬件的组成结构冯诺依曼体系结构以及操作系统的概念和操作系统的作用&#xff0c;本章的内容主要是理论他起到承上启下的作用只有理解了操作系统的运行…...

Speech | 人工智能中关于语音务必需要了解的基础知识(信号处理)及代码

语音是指人们讲话时发出的话语&#xff0c;是一种人们进行信息交流的声音&#xff0c;是由一连串的音组成语言的声音&#xff0c;我们可以理解为语音(speech)声音(acoustic)语言(language)。 目录 0.声音的基本属性 0.1.音高(pitch) 0.2.音量(Volume) 0.3.音色(Timbre) 0…...

c# 单例模式实现

方式一&#xff1a; 在C#中&#xff0c;可以使用单例模式来确保一个类只有一个实例&#xff0c;并提供一个全局访问点。 public class Singleton {private static Singleton instance;private static readonly object lockObject new object();private Singleton(){// 私有构…...

万字长文详解Java线程池面试题

王有志&#xff0c;一个分享硬核 Java 技术的互金摸鱼侠 加入 Java 人的提桶跑路群&#xff1a;共同富裕的Java人 今天是《面霸的自我修养》第 6 篇文章&#xff0c;我们一起来看看面试中会问到哪些关于线程池的问题吧。数据来源&#xff1a; 大部分来自于各机构&#xff08;J…...

【jQuery入门】链式编程、修改css、类操作和className的区别

文章目录 前言一、链式编程二、修改css2.1 获取css的值2.2 设置单个css属性2.3 设置类样式添加类移除类切换类 三、类操作与className的区别总结 前言 jQuery是一个流行的JavaScript库&#xff0c;广泛用于简化DOM操作和处理事件。在jQuery中&#xff0c;链式编程是一种强大的…...

使用的uview 微信高版本 头像昵称填写能力

<template><view><button class"cu-btn block bg-blue margin-tb-sm lg" tap"wxGetUserInfo">一键登录</button><view><!-- 提示窗示例 --><u-popup :show"show" background-color"#fff">&…...

Hadoop3完全分布式搭建

一、第一台的操作搭建 修改主机名 使用hostnamectl set-hostname 修改当前主机名 关闭防火墙和SELlinux 1&#xff0c;使用 systemctl stop firewalld systemctl disable firewalld 关闭防火墙 2&#xff0c;使用 vim /etc/selinux/config 修改为 SELINUXdisabled 使用N…...

中断——外部中断EXIT

前期疑问&#xff1a;中断可以分成外部中断和内部中断吗 文章目录 前言一、中断知识二、中断编程三、EXIT外部中断/事件控制器 3.1 中断事件线3.2 EXTI初始化结构体详解 四、软件设计 4.1 编程要点 五、代码回顾实现六、补充中断知识总结 前言 野火中断章节有这样一句话 【F…...

Kafka-服务端-副本机制

Kafka从0.8版本开始引入副本(Replica)的机制&#xff0c;其目的是为了增加Kafka集群的高可用性。 Kafka实现副本机制之后&#xff0c;每个分区可以有多个副本&#xff0c;并且会从其副本集合(Assigned Replica,AR)中选出一个副本作为Leader副本&#xff0c;所有的读写请求都由…...

银行数据仓库体系实践(4)--数据抽取和加载

1、ETL和ELT ETL是Extract、Transfrom、Load即抽取、转换、加载三个英文单词首字母的集合&#xff1a; E&#xff1a;抽取&#xff0c;从源系统(Souce)获取数据&#xff1b; T&#xff1a;转换&#xff0c;将源系统获取的数据进行处理加工&#xff0c;比如数据格式转化、数据精…...

云计算入门——Linux 命令行入门

云计算入门——Linux 命令行入门 前些天发现了一个人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;最重要的屌图甚多&#xff0c;忍不住分享一下给大家。点击跳转到网站。 介绍 如今&#xff0c;我们许多人都熟悉计算机&#xff08;台式机和笔记本电…...

自然语言处理(NLP)的发展

自然语言处理的发展 随着深度学习和大数据技术的进步&#xff0c;自然语言处理取得了显著的进步。人们正在研究如何使计算机更好地理解和生成人类语言&#xff0c;以及如何应用NLP技术改善搜索引擎、语音助手、机器翻译等领域。 方向一&#xff1a;技术进步 自然语言处理&…...

让uniapp小程序支持多色图标icon:iconfont-tools-cli

前景&#xff1a; uniapp开发小程序项目时&#xff0c;对于iconfont多色图标无法直接支持&#xff1b;若将多色icon下载引入项目则必须关注包体&#xff0c;若将图标放在oss或者哪里管理&#xff0c;加载又是一个问题&#xff0c;因此大多采用iconfont-tools工具&#xff0c;但…...

丹麦公司注册优势 丹麦公司注册条件 丹麦公司注册注意事项

丹麦公司注册优势 1、开-放的商业环境&#xff0c;拥有公平透明的商业法律和制度。 2、简化的注册流程&#xff0c;无需繁琐的审批程序和复杂的材料准备。 3、全球认可的声誉&#xff0c;有助于提升贵公司的国际形象。 4、该国的政-府在坚持适度紧缩的财政政策&#xff0c;…...

C++PythonC# 三语言OpenCV从零开发(4):视频流读取

文章目录 相关链接视频流读取CCSharpPython 总结 相关链接 C&Python&Csharp in OpenCV 专栏 【2022B站最好的OpenCV课程推荐】OpenCV从入门到实战 全套课程&#xff08;附带课程课件资料课件笔记&#xff09; OpenCV 教程中文文档|OpenCV中文 OpenCV教程中文文档|W3Csc…...

vue element MessageBox.prompt this.$prompt组件禁止显示右上角关闭按钮,取消按钮,及点击遮罩层关闭

vue element MessageBox.prompt this.$prompt组件禁止或取消显示右上角关闭按钮&#xff0c;取消按钮&#xff0c;及点击遮罩层关闭 实现效果&#xff1a; 实现代码 MessageBox.prompt(请先完成手机号绑定, 系统提示, {confirmButtonText: 提 交,showClose: false,closeOnClic…...

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

Robots.txt 文件

什么是robots.txt&#xff1f; robots.txt 是一个位于网站根目录下的文本文件&#xff08;如&#xff1a;https://example.com/robots.txt&#xff09;&#xff0c;它用于指导网络爬虫&#xff08;如搜索引擎的蜘蛛程序&#xff09;如何抓取该网站的内容。这个文件遵循 Robots…...

是否存在路径(FIFOBB算法)

题目描述 一个具有 n 个顶点e条边的无向图&#xff0c;该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序&#xff0c;确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数&#xff0c;分别表示n 和 e 的值&#xff08;1…...

GruntJS-前端自动化任务运行器从入门到实战

Grunt 完全指南&#xff1a;从入门到实战 一、Grunt 是什么&#xff1f; Grunt是一个基于 Node.js 的前端自动化任务运行器&#xff0c;主要用于自动化执行项目开发中重复性高的任务&#xff0c;例如文件压缩、代码编译、语法检查、单元测试、文件合并等。通过配置简洁的任务…...

Scrapy-Redis分布式爬虫架构的可扩展性与容错性增强:基于微服务与容器化的解决方案

在大数据时代&#xff0c;海量数据的采集与处理成为企业和研究机构获取信息的关键环节。Scrapy-Redis作为一种经典的分布式爬虫架构&#xff0c;在处理大规模数据抓取任务时展现出强大的能力。然而&#xff0c;随着业务规模的不断扩大和数据抓取需求的日益复杂&#xff0c;传统…...

android RelativeLayout布局

<?xml version"1.0" encoding"utf-8"?> <RelativeLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_height"match_parent"android:gravity&…...

Android写一个捕获全局异常的工具类

项目开发和实际运行过程中难免会遇到异常发生&#xff0c;系统提供了一个可以捕获全局异常的工具Uncaughtexceptionhandler&#xff0c;它是Thread的子类&#xff08;就是package java.lang;里线程的Thread&#xff09;。本文将利用它将设备信息、报错信息以及错误的发生时间都…...

基于小程序老人监护管理系统源码数据库文档

摘 要 近年来&#xff0c;随着我国人口老龄化问题日益严重&#xff0c;独居和居住养老机构的的老年人数量越来越多。而随着老年人数量的逐步增长&#xff0c;随之而来的是日益突出的老年人问题&#xff0c;尤其是老年人的健康问题&#xff0c;尤其是老年人产生健康问题后&…...

【Zephyr 系列 16】构建 BLE + LoRa 协同通信系统:网关转发与混合调度实战

🧠关键词:Zephyr、BLE、LoRa、混合通信、事件驱动、网关中继、低功耗调度 📌面向读者:希望将 BLE 和 LoRa 结合应用于资产追踪、环境监测、远程数据采集等场景的开发者 📊篇幅预计:5300+ 字 🧭 背景与需求 在许多 IoT 项目中,单一通信方式往往难以兼顾近场数据采集…...

轻量安全的密码管理工具Vaultwarden

一、Vaultwarden概述 Vaultwarden主要作用是提供一个自托管的密码管理器服务。它是Bitwarden密码管理器的第三方轻量版&#xff0c;由国外开发者在Bitwarden的基础上&#xff0c;采用Rust语言重写而成。 &#xff08;一&#xff09;Vaultwarden镜像的作用及特点 轻量级与高性…...