bable 【实用教程】

简介

bable 用于将 ES6 的语法编译为 ES5

  • 只关心语法,不关心 API 是否正确。
  • 不处理模块化(webpack 会处理)

搭建开发环境

  1. 安装相关的包
npm i @babel/cli @babel/core @babel/preset-env
  1. 新建文件 .babelrc,内容为
{ "presets": [["@babel/preset-env"]],"plugins": []
}
  • presets 内为预设的 plugins 的集合
    • 编译 jsx,用 @bakel/preset-react
    • 编译 TS,用 @babel/preset-typescript
  • bable 本身是个空壳,所有的编译是通过一个个 plugins 实现的

执行编译

npx babel src/index.js

babel-polyfill

babel-polyfill 是 core-js 和 regenerator 的集合。

  • core-js 除了不支持生成器语法,其他都能编译
  • regenerator 可编译生成器语法,弥补了 core-js 的不足

注意事项:
Babel 7.4之后弃用了 babel-polyfil,推荐直接使用 core-js和 regenerator,但面试中还是可能考察。

按需引入的配置方法

按需引入:只引入代码中使用的部分,其他部分不引入,可减少最终打包的体积。

.babelrc

"presets": [["@babel/preset-env",{"useBuiltIns": "usage",// corejs 的最新版本号"corejs": 3}]
],

Babel 7.4之后弃用了 babel-polyfil,但也是按此方式配置,因为它直接用的 corejs ,没有用到 babel-polyfil

存在的问题

会污染全局环境,因为其实现方式是:

在这里插入图片描述

可能会覆盖用户的定义。

babel-runtime

用于解决 babel-polyfil 污染全局环境的问题。

仅自己开发的系统,可以不使用 babel-runtime ,但若是开发第三方库,则一定要用 babel-runtime

实现原理

使用 _promise ,_includes 等自定义名称的方式,避免和用户的定义冲突。

配置方法

  1. 安装 @babel/plugin-transform-runtime 在 devDependencies 中
  2. 安装 @babel/runtime 在 dependencies 中
  3. .babelrc 的 plugins 中添加
    "plugins": [["@babel/plugin-transform-runtime",{"absoluteRuntime": false,"corejs": 3,"helpers": true,"regenerator": true,"useESModules": false}]]

通常按此官方配置即可。

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

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

相关文章

已解决javax.transaction.InvalidTransactionException:事务无效的正确解决方法,亲测有效!!!

已解决javax.transaction.InvalidTransactionException:事务无效的正确解决方法,亲测有效!!! 目录 问题分析 报错原因 解决思路 解决方法 1. 确保事务的正确启动和结束 Spring中的事务管理 2. 避免嵌套事务问题…

Linux显示服务器Wayland切换到X11

1、临时切换 : 注销当前用户账户,返回到登录屏幕。 在登录屏幕上,选择您要登录的用户账户。 在输入密码之前,在登录屏幕的右下角可能有一个齿轮图标,点击它以展开更多选项。 在选项中选择“Ubuntu on Xorg”或“Ubu…

【uml期末复习】统一建模语言大纲

前言: 关于uml的期末复习的常考知识点,可能对你们有帮助😉 目录 第一部分 概念与基础 第一章 面向对象技术 第二章 统一软件过程 第三章 UML概述 第四章 用例图 第五章 类图 第六章 对象图 第七章 顺序图 第八章 协作图 第九章 状态…

【应用开发二】GPIO操控(输出、输入、中断)

1 操控GPIO方式 控制目录:/sys/class/gpio /sys/class/gpio目录下文件如下图所示: 1.1 gpiochipX目录 功能:当前SoC所包含的所有GPIO控制器 i.mx6ull一共包含5个GPIO控制器,分别为GPIO1~5分别对应gpiochip0、gpiochip32、gpi…

基于java语言+springboot技术架构开发的 互联网智能3D导诊系统源码支持微信小程序、APP 医院AI智能导诊系统源码

基于java语言springboot技术架构开发的 互联网智能3D导诊系统源码支持微信小程序、APP 医院AI智能导诊系统源码 一、智慧导诊系统开发原理 导诊系统从原理上大致可分为基于规则模板和基于数据模型两类。 1、基于规则推理的方法通过人工建立症状、疾病和科室之间的对应规则实现…

【uniapp】uniapp开发微信小程序入门教程

HBuilderx中uniapp开发微信小程序入门教程 一、 环境搭建 1. HBuilderx下载安装 HBuilderx下载安装地址 2. 微信开发者工具下载安装 微信开发者工地址具下载安装 二、创建uniapp项目 选择:文件>新建>项目>uni-app 输入项目名称>选择默认模板>…

GPT-5

欢迎来到 Papicatch的博客 文章目录 🍉技术突破预测 🍈算法进步 🍈理解力提升 🍈行业推动力 🍉人机协作的未来 🍈辅助决策 🍈增强创造力 🍈复杂任务中的角色 🍈人…

Unity | Shader基础知识(番外:模型的制作流程)

目录 一、前言 二、模型的诞生 三、模型的表面 四、模型的贴图 五、上完材质的模型 六、材质的来源 七、作者的碎碎念 一、前言 up发现,初学程序,除非你是美术,模型出生,要不然对这些都是萌萌哒(蒙蒙哒&#x…

鸿蒙北向开发 ubuntu20.04 gn + ninja环境傻瓜式搭建闭坑指南

ninja跟gn都是比较时髦的东西,由歪果仁维护,如果走下载源码并编译这种流程的话需要走github跟google官网下载,国内的用网环境相信各位傻瓜都知道,github跟google这几年基本是属于连不上的状态,好在你看的鸿蒙项目跟国内的一些软件大厂已经帮你爬过梯子了,ninja工具跟gn工具已经…

十步学习法,赋能程序员

大家好,我是码农先森。 引言 最近看了《软技能:代码之外的生存指南》这本书,对其中的 “十步学习法”。 有一些感触,所以将其中的内容记录并总结了下来,分享给大家。 程序员在学习成长的过程中,除了关注…

MySQL高级-SQL优化-小结

文章目录 1、insert 优化2、主键优化3、order by 优化4、group by 优化5、limit 优化6、count 优化7、update 优化 1、insert 优化 insert:批量插入、手动控制事务、主键顺序插入 大批量插入:load data local infile 2、主键优化 主键长度尽量短、顺序插…

unity 导入的模型设置讲解

咱们先讲Model这一栏 Model Scene:场景级属性,例如是否导入灯光和照相机,以及使用什么比例因子。 Scale Factor:缩放因子(也就是模型导入后大小如果小了或者大了在这里直接改是相当于该模型的大小的,而且在…

如何打造安全DNS以保障业务可用?一文解读

DNS自1987年被实施以来,已成为网络通信中最重要的核心基础设施,同时也是企业对外提供数字服务的关键。没有正常安全的DNS服务,企业经营也就无从谈起。在DNS攻击逐年上升且容易被忽略的现代应用时代,如何打造安全DNS?本…

LLaMA2模型训练加速秘籍:700亿参数效率提升195%!

点击蓝字 关注我们 关注并星标 从此不迷路 计算机视觉研究院 公众号ID | 计算机视觉研究院 学习群 | 扫码在主页获取加入方式 开源地址:https://github.com/hpcaitech/ColossalAI 计算机视觉研究院专栏 Column of Computer Vision Ins…

mov和mp4区别是什么?苹果的原创和时代的宠儿

在数字媒体领域,视频格式的选择往往决定了观看体验的质量和文件的兼容性。在众多视频格式中,MOV和MP4无疑是最具代表性的两种,它们分别承载着苹果和互联网世界的技术革新与历史变迁。本文将带您穿越时间的长廊,探索MOV与MP4的发展…

嵌入式Linux的浮点运算能力测试

嵌入式Linux的浮点运算能力测试 今天需要对一款ARM CPU的浮点数运算能力进行测试,采用了台式机上常用的SuperPI相同的原理:计算一定小数位数的圆周率来测试硬件的浮点数计算能力和稳定性。 首先下载计算软件的源代码,可以使用下面命令&#…

企业数据治理的下一步是数据资产管理?

随着信息技术的飞速发展和数字化转型的深入推进,企业数据已成为驱动业务增长和创新的核心要素。当企业数据治理工作取得显著成效后,如何进一步发挥数据的价值,实现数据资产的有效管理,成为企业面临的重要课题。 数据治理的基石作用…

国际数字影像产业园创业培训,全面提升创业能力!

国际数字影像产业园作为数字影像产业的创新高地,致力于提供全面的创业支持服务。其中,创业培训作为重要的组成部分,旨在通过系统的课程设置和专业的讲师团队,为创业者提供从基础到进阶的全方位指导,帮助他们在数字影像…

Node.js中基于node-schedule实现定时任务之详解

文章目录 一、定时任务二、node-schedule、1、安装2、引入3、基于Cron表达式的规则4、基于Date的规则5、基于RecurrenceRule的规则6、API7、状态监听 一、定时任务 实际工作中,可能会遇到定时清除某个文件夹内容,定时发送消息或发送邮件给指定用户&…

C++STL 初阶(5)vector的简易实现(上)

不同于string只实现一个最简单的版本,vector在此处我们要实现的是模版类,类模版的声明和定义分离非常不方便(会在链接时报错),所以我们都只在一个vector.h下去实现声明和定义。后续我们提及到的库里面实现的vector也是…