babel

文章目录

  • babel
  • polyfill
  • babel-polyfill

babel

Babel 默认只转换新的 JavaScript 句法(syntax),而不转换新的 API,比如Iterator、Generator、Set、Map、Proxy、Reflect、Symbol、Promise等全局对象,以及一些定义在全局对象上的方法(比如Object.assign)都不会转码。

polyfill

举例来说,ES6 在Array对象上新增了Array.from方法。Babel 就不会转码这个方法。如果想让这个方法运行,可以使用core-js和regenerator-runtime(后者提供generator函数的转码),为当前环境提供一个垫片

安装命令如下:

npm install --save-dev core-js regenerator-runtime

然后在脚本头部加上两行代码

import 'core-js';
import 'regenerator-runtime/runtime';
// 或者
require('core-js');
require('regenerator-runtime/runtime');

但是我在项目中用的不是core-js或者regenerator-runtime用的babel-polyfill

babel-polyfill

babel-polyfill 不是一个 Babel 插件,而是一个用于提供缺失特性的 JavaScript 库。在 Babel 7 及以上版本中,推荐使用 @babel/preset-env 配合 core-js 来实现类似的功能,而不再直接使用 babel-polyfill
作用:
babel-polyfill(或者 core-js + regenerator-runtime 的组合)的主要作用是在目标环境中提供缺失的 ECMAScript 新特性和原生 API,使得开发者可以在较旧的浏览器或环境中使用最新的 JavaScript 语言特性
babel.config.js的配置:(本项目的配置,没有通用性,仅作参考)

module.exports = {presets: [['@vue/app', { useBuiltIns: 'entry' }],['@babel/env', { targets: { node: 6 } }]],plugins: ['lodash','dynamic-import-webpack']
};
  1. presets 预设配置:
  • presets 是一组预定义的 Babel 插件集合,它们可以一次性配置,而不需要单独列举每个插件。
  • ['@vue/app', { useBuiltIns: 'entry' }]:这里使用了 Vue CLI 提供的 @vue/app 预设。useBuiltIns: ‘entry’ 表示通过按需引入 polyfills(垫片)来支持目标环境缺失的特性,这样可以减小最终打包的文件大小。
  • ['@babel/env', { targets: { node: 6 } }]:这里使用了 @babel/env 预设,它根据目标环境自动选择合适的转换插件。在这里,配置了目标环境为 Node.js 6。
  1. plugins 插件配置:
  • plugins 是指定需要使用的单个 Babel 插件的数组。
  • lodash:这里使用了 Babel 插件 lodash,它允许你按需引入 Lodash 库的功能,而不是一次性引入整个库。(项目需要 不需要就不配)
  • dynamic-import-webpack:这里使用了 Babel 插件 dynamic-import-webpack,它帮助处理动态导入(dynamic import)语法,通常用于实现代码分割和懒加载。

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

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

相关文章

〖大前端 - ES6篇①〗- ES6简介

说明:该文属于 大前端全栈架构白宝书专栏,目前阶段免费,如需要项目实战或者是体系化资源,文末名片加V!作者:哈哥撩编程,十余年工作经验, 从事过全栈研发、产品经理等工作,目前在公司…

burp靶场--host攻击

burp靶场–host攻击 https://portswigger.net/web-security/host-header#what-is-an-http-host-header-attack 在本节中,我们将讨论错误配置和有缺陷的业务逻辑如何通过 HTTP 主机标头使网站遭受各种攻击。我们将概述用于识别易受 HTTP 主机标头攻击的网站的高级方…

PolarDB无感切换特性助力游戏领域高可用实践

❤️作者主页:小虚竹 ❤️作者简介:大家好,我是小虚竹。2022年度博客之星评选TOP 10🏆,Java领域优质创作者🏆,CSDN博客专家🏆,华为云享专家🏆,掘金年度人气作…

1月 mysql索引分享

pre: 分享目标:怎样看到索引有被用到、索引的注意事项等等 索引有哪些:全文索引、主键索引、唯一索引、普通索引、覆盖索引、组合索引、B-Tree索引、哈希索引… InnoDB使用聚簇索引,B树索引。 B 索引 MySQL InnoDB的索引数据结…

零代码编程:用ChatGPT智能批量删除文件标题中的某些字符

文件里面有很多个mp4视频文件,要批量删除文件标题中的“Little Fox - ”“Level 04”、“Level 4”、“Level04”“ - ”、“-”、“_”等字母和符号。 在ChatGPT中输入提示词如下: 你是一个Python编程专家,要完成一个批量重命名文件标题的任…

【wu-framework-parent 1.2.2-JDK17-SNAPSHOT 新版本中的 ACW】

版本: 1.2.2-JDK17-SNAPSHOT 项目地址:https://gitee.com/wujiawei1207537021/wu-framework-parent/tree/master/wu-smart-intergration/wu-smart-acw 演示地址:http://124.222.48.62:30193/wu-smart-acw-ui/index.html admin/admin docker启动 dock…

AI大概不会很快抢走你的饭碗哦!

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗?订阅我们的简报,深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同,从行业内部的深度分析和实用指南中受益。不要错过这个机会,成为AI领…

Unity3d引擎中使用AIGC生成的360全景图(天空盒)

前言 在这里与Skybox AI一起,一键打造体验无限的360世界,这是这个AIGC一键生成全景图的网站欢迎语。 刚使用它是23年中旬,在没有空去给客户实地拍摄全景图时,可以快速用它生成一些相关的全景图,用作前期沟通的VR de…

[Combine 开发] 寻找值

first() first() 操作符用于获取发布者的第一个元素。它返回一个新的发布者,该发布者只发出第一个元素,然后完成 基本用法: let numbers [1, 2, 3, 4, 5]let cancellable numbers.publisher.first().sink { value inprint("First v…

数据结构——Java实现栈和队列

一、栈 Stack 1.特点 (1)栈是一种线性数据结构 (2)规定只能从栈顶添加元素,从栈顶取出元素 (3)是一种先进后出的数据结构(Last First Out)LIFO 2.具体实现 Java中可…

leetcode35题:搜索插入位置

文章目录 一、题目描述?二、不同时间复杂度的代码实现以及讲解1.时间复杂度:O(n)2.时间复杂度:O(log n) 一、题目描述? 给定一个排序数组和一个目标值,在数组中找到目标值,并返回其索引。如果目标值不存在…

Zookeeper集群

一、Zookeeper概述 1.1 Zookeeper 定义 Zookeeper是一个开源的分布式的,为分布式框架提供协调服务的Apache项目。 1.2 Zookeeper 工作机制 Zookeeper从设计模式角度来理解:是一个基于观察者模式设计的分布式服务管理框架,它负责存储和管理…

华夏基金“冰火两重天”:产品增量不增值,靠什么赢得用户?

近日,华夏基金发布关于华夏野村日经225交易型开放式指数证券投资基金(QDII)(下称“华夏野村日经ETF”)二级市场交易价格溢价风险提示及临时停牌公告。 公告内容显示,华夏野村日经ETF二级市场交易价格明显高…

备战2个月,面试被问麻了....

🔥 交流讨论:欢迎加入我们一起学习! 🔥 资源分享:耗时200小时精选的「软件测试」资料包 🔥 教程推荐:火遍全网的《软件测试》教程 📢欢迎点赞 👍 收藏 ⭐留言 &#x1…

为什么静态IP是您批量创建社交媒体和账户管理必备?

“新设备登录请求被拒绝,请使用常用设备登录。”谁没有遇到过远程管理社交或商业账户时登录被拒的情况呢? 更糟糕的情况可能是遇到这样的提示:“您的账号可能被盗用,暂时限制使用。请按要求进行身份验证。” 最坏的结果则可能是因为各种原…

工业RFID读卡器的功能和作用

工业读卡器主要用于识别和读写特定目标的数据,它的种类有很多,有分体的读写器也有一体的读写器,根据不同场景的应用可以选择不同的读写器。 工业RFID读卡器的功能和作用 工业RFID读卡器在工业自动化和物流管理等领域中发挥着重要作用。其主要…

什么是DDoS攻击?

什么是DDoS攻击? 拒绝服务(Denial-of-Service,DoS)攻击是一种针对某些服务可用性的攻击。 通过耗尽CPU、内存、带宽以及磁盘空间等系统资源,来阻止或削弱对网络、系统或应用程序的授权使用的行为。 如果攻击者采用单一…

动态权限有哪些

定位权限: ACCESS_FINE_LOCATION:精确位置ACCESS_COARSE_LOCATION:大致位置 相机权限: CAMERA:访问摄像头 存储权限: READ_EXTERNAL_STORAGE:读取外部存储WRITE_EXTERNAL_STORAGE:…

springboot集成easypoi

easypoi,主打的功能就是容易,通过简单的配置&#xff0c;就可以方便的写出Excel导出,Excel模板导出,Excel导入,Word模板导出 pom导入依赖 <dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-star…

跳跃游戏-算法

题目 给定一个数组nums {1,2,3,4,5}&#xff0c;每个元素nums[i]表示从i这个位置最多可以向前跳跃nums[i]个台阶&#xff0c;求最小需要跳几次就可以调到末尾 思路 反向查找 从末尾开始逐个向前判断最远的起跳位置&#xff0c;接着再以该位置递归的判断 public int jumpT…