vue项目中常见的一些preset及其关系

Babel的作用

Babel主要用途是用来做js代码转换的，将最新的js语法或者api转换成低版本浏览器可兼容执行的代码。

语法兼容是指一些浏览器新特性增加的js写法，例如箭头函数 ()=>{}；低版本的浏览器无法识别这些，会导致一些语法解析错误。

api兼容是指随着浏览器版本迭代，新增的一些Api方法，比如Object.assign是ES6的语法，在只支持es5语法的浏览器中，Object对象并没有该方法，会导致调用错误。

preset和polyfill

Babel主要通过**@babel/preset-env和对应的polyfill**来实现API的兼容性。

具体来说，Babel默认只转换新的JavaScript句法（syntax），而不转换新的API。例如，像Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会被Babel直接转码。

为了处理这些新的API，我们可以使用@babel/preset-env。当设置了useBuiltIns选项（不为false）时，@babel/preset-env就会使用polyfill来对API进行处理。而@babel/preset-env主要是依赖core-js来处理API的兼容性，所以需要事先安装core-js。

此外，当配置了useBuiltIns: 'usage’时，Babel会自动将代码里已使用到的且browserslist环境不支持的polyfill导入，而无需在代码中主动import。

另外，babel-polyfill也可以用来为当前环境提供一个垫片，从而实现ES6新API的兼容。但请注意，babel-polyfill已被废弃，推荐使用@babel/preset-env和core-js的组合来替代。

总的来说，Babel通过@babel/preset-env和对应的polyfill（如core-js）来提供API的兼容性。在配置和使用时，需要根据项目的需求和目标浏览器来选择合适的preset和polyfill版本。

preset的Babel配置方式

{presets: ['@vue/cli-plugin-babel/preset']
}

常见预设

1、 @vue/cli-plugin-babel/preset

等价于：@vue/babel-preset-app

2、@vue/babel-preset-app

该预设包含：@babel/preset-env，同时包含以下依赖

{"@babel/core": "^7.11.0","@babel/helper-compilation-targets": "^7.9.6","@babel/helper-module-imports": "^7.8.3","@babel/plugin-proposal-class-properties": "^7.8.3","@babel/plugin-proposal-decorators": "^7.8.3","@babel/plugin-syntax-dynamic-import": "^7.8.3","@babel/plugin-syntax-jsx": "^7.8.3","@babel/plugin-transform-runtime": "^7.11.0","@babel/preset-env": "^7.11.0","@babel/runtime": "^7.11.0","@vue/babel-plugin-jsx": "^1.0.3","@vue/babel-preset-jsx": "^1.2.4","babel-plugin-dynamic-import-node": "^2.3.3","core-js": "^3.6.5","core-js-compat": "^3.6.5","semver": "^6.1.0"}

从中可以看出该预设支持jsx语法。

该预设在不指定option配置的情况下，useBuiltIns默认设置为usage

3、@vue/babel-preset-jsx包含以下依赖项

{"@vue/babel-helper-vue-jsx-merge-props": "^1.2.1","@vue/babel-plugin-transform-vue-jsx": "^1.2.1","@vue/babel-sugar-composition-api-inject-h": "^1.2.1","@vue/babel-sugar-composition-api-render-instance": "^1.2.4","@vue/babel-sugar-functional-vue": "^1.2.2","@vue/babel-sugar-inject-h": "^1.2.2","@vue/babel-sugar-v-model": "^1.2.3","@vue/babel-sugar-v-on": "^1.2.3"}

4、@babel/preset-env

{"@babel/compat-data": "^7.14.0","@babel/helper-compilation-targets": "^7.13.16","@babel/helper-plugin-utils": "^7.13.0","@babel/helper-validator-option": "^7.12.17","@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.13.12","@babel/plugin-proposal-async-generator-functions": "^7.14.2","@babel/plugin-proposal-class-properties": "^7.13.0","@babel/plugin-proposal-class-static-block": "^7.13.11","@babel/plugin-proposal-dynamic-import": "^7.14.2","@babel/plugin-proposal-export-namespace-from": "^7.14.2","@babel/plugin-proposal-json-strings": "^7.14.2","@babel/plugin-proposal-logical-assignment-operators": "^7.14.2","@babel/plugin-proposal-nullish-coalescing-operator": "^7.14.2","@babel/plugin-proposal-numeric-separator": "^7.14.2","@babel/plugin-proposal-object-rest-spread": "^7.14.2","@babel/plugin-proposal-optional-catch-binding": "^7.14.2","@babel/plugin-proposal-optional-chaining": "^7.14.2","@babel/plugin-proposal-private-methods": "^7.13.0","@babel/plugin-proposal-private-property-in-object": "^7.14.0","@babel/plugin-proposal-unicode-property-regex": "^7.12.13","@babel/plugin-syntax-async-generators": "^7.8.4","@babel/plugin-syntax-class-properties": "^7.12.13","@babel/plugin-syntax-class-static-block": "^7.12.13","@babel/plugin-syntax-dynamic-import": "^7.8.3","@babel/plugin-syntax-export-namespace-from": "^7.8.3","@babel/plugin-syntax-json-strings": "^7.8.3","@babel/plugin-syntax-logical-assignment-operators": "^7.10.4","@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3","@babel/plugin-syntax-numeric-separator": "^7.10.4","@babel/plugin-syntax-object-rest-spread": "^7.8.3","@babel/plugin-syntax-optional-catch-binding": "^7.8.3","@babel/plugin-syntax-optional-chaining": "^7.8.3","@babel/plugin-syntax-private-property-in-object": "^7.14.0","@babel/plugin-syntax-top-level-await": "^7.12.13","@babel/plugin-transform-arrow-functions": "^7.13.0","@babel/plugin-transform-async-to-generator": "^7.13.0","@babel/plugin-transform-block-scoped-functions": "^7.12.13","@babel/plugin-transform-block-scoping": "^7.14.2","@babel/plugin-transform-classes": "^7.14.2","@babel/plugin-transform-computed-properties": "^7.13.0","@babel/plugin-transform-destructuring": "^7.13.17","@babel/plugin-transform-dotall-regex": "^7.12.13","@babel/plugin-transform-duplicate-keys": "^7.12.13","@babel/plugin-transform-exponentiation-operator": "^7.12.13","@babel/plugin-transform-for-of": "^7.13.0","@babel/plugin-transform-function-name": "^7.12.13","@babel/plugin-transform-literals": "^7.12.13","@babel/plugin-transform-member-expression-literals": "^7.12.13","@babel/plugin-transform-modules-amd": "^7.14.2","@babel/plugin-transform-modules-commonjs": "^7.14.0","@babel/plugin-transform-modules-systemjs": "^7.13.8","@babel/plugin-transform-modules-umd": "^7.14.0","@babel/plugin-transform-named-capturing-groups-regex": "^7.12.13","@babel/plugin-transform-new-target": "^7.12.13","@babel/plugin-transform-object-super": "^7.12.13","@babel/plugin-transform-parameters": "^7.14.2","@babel/plugin-transform-property-literals": "^7.12.13","@babel/plugin-transform-regenerator": "^7.13.15","@babel/plugin-transform-reserved-words": "^7.12.13","@babel/plugin-transform-shorthand-properties": "^7.12.13","@babel/plugin-transform-spread": "^7.13.0","@babel/plugin-transform-sticky-regex": "^7.12.13","@babel/plugin-transform-template-literals": "^7.13.0","@babel/plugin-transform-typeof-symbol": "^7.12.13","@babel/plugin-transform-unicode-escapes": "^7.12.13","@babel/plugin-transform-unicode-regex": "^7.12.13","@babel/preset-modules": "^0.1.4","@babel/types": "^7.14.2","babel-plugin-polyfill-corejs2": "^0.2.0","babel-plugin-polyfill-corejs3": "^0.2.0","babel-plugin-polyfill-regenerator": "^0.2.0","core-js-compat": "^3.9.0","semver": "^6.3.0","@babel/core": "7.14.2","@babel/core-7.12": "npm:@babel/core@7.12.9","@babel/helper-plugin-test-runner": "7.13.10","@babel/plugin-syntax-dynamic-import": "^7.8.3"}

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

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

相关文章

spark shuffle写操作——UnsafeShuffleWriter

spark shuffle写操作——UnsafeShuffleWriter

PackedRecordPointer 使用long类型packedRecordPointer存储数据。 数据结构为：[24 bit partition number][13 bit memory page number][27 bit offset in page] LongArray LongArray不同于java中long数组。LongArray可以使用堆内内存也可以使用堆外内存。 Memor…
阅读更多...
秋招突击——7/9——字节面经

秋招突击——7/9——字节面经

文章目录 引言正文八股MySQL熟悉吗？讲一下MySQL索引的结构？追问：MySQL为什么要使用B树？在使用MySQL的时候，如何避免索引失效？讲一下MySQL的事物有哪几种特征？MySQL的原子性可以实现什么效果&…
阅读更多...
GESP C++ 三级真题（2023年9月）T2 进制判断

GESP C++ 三级真题（2023年9月）T2 进制判断

进制判断 问题描述 N进制数指的是逢N进一的计数制。例如，人们日常生活中大多使用十进制计数， 而计算机底层则一般使用二进制。除此之外，八进制和十六进制在一些场合也是 常用的计数制(十六进制中，一般使用字母A至F表示十至十五…
阅读更多...
【区块链+跨境服务】粤澳健康码跨境互认系统 | FISCO BCOS应用案例

【区块链+跨境服务】粤澳健康码跨境互认系统 | FISCO BCOS应用案例

2020 年突如其来的新冠肺炎疫情，让社会治理体系面临前所未见的考验，如何兼顾疫情防控与复工复产成为社会 各界共同努力的目标。区块链技术作为传递信任的新一代信息基础设施，善于在多方协同的场景中发挥所长，从 而为粤澳两地的疫情…
阅读更多...
uniapp上传文件并获取上传进度

uniapp上传文件并获取上传进度

1. 上传普通文件 uni.chooseMessageFile({count: 1,success: (res) > {console.log(res)console.log("res123456", res.tempFiles[0].path)const uploadTask uni.uploadFile({url: http://localhost:8000/demo,filePath: res.tempFiles[0].path,name: file,form…
阅读更多...
CSS关于居中的问题

CSS关于居中的问题

文章目录 1. 行内和块级元素自身相对父控件居中1.1. 块级元素相对父控件居中1.2. 行内元素相对于父控件居中 2. 实现单行文字垂直居中3. 子绝父相实现子元素的水平垂直居中3.1. 方案一3.1.1. 示例 3.2. 方案二3.2.1. 示例 3.3. 方案三(推荐)3.3.1. 示例 3.4. 方案四(了解一下) …
阅读更多...
AI大模型知识点大梳理_ai大模型的精度以下哪项描述的准确

AI大模型知识点大梳理_ai大模型的精度以下哪项描述的准确

AI大模型是什么 AI大模型是指具有巨大参数量的深度学习模型，通常**包含数十亿甚至数万亿个参数。**这些模型可以通过学习大量的数据来提高预测能力，从而在自然语言处理、计算机视觉、自主驾驶等领域取得重要突破。 AI大模型的定义具体可以根据参数规模…
阅读更多...
短信验证码研究：公开的短信验证码接口、不需要注册的短信验证码接口

短信验证码研究：公开的短信验证码接口、不需要注册的短信验证码接口

短信验证码研究：公开的短信验证码接口、不需要注册的短信验证码接口 0 说明 本文提供了一个短信验证码接口，主要用于以下场景： 1、用于开发调试 2、用于申请验证码困难的企业和个人 3、用于短信验证码认证还没有通过，但是着急…
阅读更多...
DBeaver操作MySQL无法同时执行多条语句的解决方法

DBeaver操作MySQL无法同时执行多条语句的解决方法

DBeaver选择数据库连接，在【驱动属性】中将allowMultiQueries允许执行多条语句置为True
阅读更多...
各种音频处理器

各种音频处理器

在HiFi（高保真）音频系统中，通常需要使用一些特定类型的音频处理器，以确保音频信号的高保真和优质输出。以下是一些常见的音频处理器类型及其在HiFi系统中的应用： DAC（数模转换器）： …
阅读更多...
mysql 导出导入 数据库

mysql 导出导入 数据库

导出 MySQL 数据库可以通过多种方法实现，最常见的方法是使用 mysqldump 工具。以下是一些常用的导出 MySQL 数据库的方法： 使用 mysqldump 工具 mysqldump 是一个命令行工具，用于导出 MySQL 数据库的结构和数据。以下是基本的导出命令&…
阅读更多...
泰迪智能科技大数据实验室产品-实训管理平台介绍

泰迪智能科技大数据实验室产品-实训管理平台介绍

高校大数据实验室通常配备有先进的计算机硬件和软件工具，以及专门的数据库和分析平台，以便研究人员和学生能够进行复杂的数据处理、分析和解释。主要利用大数据技术进行科学研究、技术开发和人才培养。 泰迪智能科技实训管理平台作为教学核心&#xff0c…
阅读更多...
JS进阶-构造函数

JS进阶-构造函数

学习目标： 掌握构造函数 学习内容： 构造函数 构造函数： 封装是面向对象思想中比较重要的一部分，js面向对象可以通过构造函数实现的封装。 同样的将变量和函数组合到了一起并能通过this实现数据的共享，所不同的是借助…
阅读更多...
小程序需要进行软件测试吗?小程序测试有哪些测试内容?

小程序需要进行软件测试吗?小程序测试有哪些测试内容?

在如今移动互联网快速发展的时代，小程序已成为人们生活中不可或缺的一部分。然而，面对日益增长的小程序数量和用户需求，小程序的稳定性和质量问题日益突显。因此，对小程序进行软件测试显得尤为重要。 近期的一项调查显示&#xf…
阅读更多...
【架构】分布式与微服务架构解析

【架构】分布式与微服务架构解析

分布式与微服务架构解析 一、分布式1、什么是分布式架构2、为什么需要分布式架构3、分布式架构有哪些优势？4、分布式架构有什么劣势？5、分布式架构有哪些关键技术？6、基于分布式架构如何提高其高性能？7、如何基于架构提高系统的稳…
阅读更多...
【工具】咸鱼小助手，一款咸鱼之王辅助工具

【工具】咸鱼小助手，一款咸鱼之王辅助工具

转载请注明出处：小锋学长生活大爆炸[xfxuezhagn.cn] 如果本文帮助到了你，欢迎[点赞、收藏、关注]哦~ Github：咸鱼之王的自动化脚本，自动答题、爬塔、领资源等 下载：(密码:9u22) 咸鱼小助手 文档：腾讯文档 视…
阅读更多...
软考《信息系统运行管理员》-3.2信息系统设施运维的环境管理

软考《信息系统运行管理员》-3.2信息系统设施运维的环境管理

3.2信息系统设施运维的环境管理 1 计算机机房的选址要求 电子计算机机房地理位置 选择水源充足，电子比较稳定可靠，交通通信方便，自然环境清洁的地点要远离产生粉尘、油烟、有害气体以及生产或存储具有腐蚀性、易燃、易爆物品的工厂、仓库、…
阅读更多...
3d模型选不中任何东西是什么原因？---模大狮模型网

3d模型选不中任何东西是什么原因？---模大狮模型网

在进行3D模型设计过程中，有时会遇到无法选择模型中的任何元素的问题。这种情况可能会影响设计师的工作效率和体验，因此了解问题的原因以及如何解决是至关重要的。本文将探讨在3D建模中遇到无法选中模型元素的原因及解决方法。 一、问题原因分析 无法选中…
阅读更多...
跨境必备：提升Instagram互动率攻略

跨境必备：提升Instagram互动率攻略

在这个视觉为王的数字时代，Instagram已成为品牌与用户互动的重要平台。然而，要在激烈的竞争中脱颖而出，单靠高质量的内容还远远不够。本文将深入探讨一系列经过验证的策略，旨在提高Instagram上的用户互动率，从而增强品…
阅读更多...
07浅谈大语言模型可调节参数tempreture

07浅谈大语言模型可调节参数tempreture

浅谈temperature 什么是temperature？ temperature是大预言模型生成文本时常用的两个重要参数。它的作用体现在控制模型输出的确定性和多样性： 控制确定性： temperature参数可以控制模型生成文本的确定性，大部分模型中temperatur…
阅读更多...
最新文章

Copyright @ 2022~2023