前端工程化之:webpack4-1(babel的安装和使用)

一、安装

官网:https://babeljs.io/
民间中文网:https://www.babeljs.cn/

1.babel简介

 babel一词来自于希伯来语,直译为巴别塔。

巴别塔象征的统一的国度、统一的语言

而今天的 JS 世界缺少一座巴别塔,不同版本的浏览器能识别的 ES 标准并不相同,就导致了开发者面对不同版本的浏览器要使用不同的语言,和古巴比伦一样,前端开发也面临着这样的困境。

 babel 的出现,就是用于解决这样的问题,它是一个编译器,可以把不同标准书写的语言,编译为统一的、能被各种浏览器识别的语言。

由于语言的转换工作灵活多样, babel 的做法和 postcss 、 webpack 差不多,它本身仅提供一些分析功能,真正的转换需要依托于插件完成。

2.babel的安装 

 babel 可以和构建工具联合使用,也可以独立使用。

如果要独立的使用 babel ,需要安装下面两个库:

  • @babel/core: babel 核心库,提供了编译所需的所有api
  • @babel/cli:提供一个命令行工具,调用核心库的api完成编译
npm i -D @babel/core @babel/cli

 

二、babel的使用 

1.babel的使用 

 @babel/cli 的使用极其简单,它提供了一个命令 babel

# 按文件编译
babel 要编译的文件 -o 编辑结果文件
// npx babel a.js -o c.js 

# 按目录编译
babel 要编译的整个目录 -d 编译结果放置的目录
// npx bael js -d dist
// npx bael js -d dist -w(实时监控)

2.babel的配置

可以看到, babel 本身没有做任何事情,真正的编译要依托于 babel插件  babel预设 来完成。

 babel 预设和 postcss 预设含义一样,是多个插件的集合体,用于解决一系列常见的兼容问题。

如何告诉 babel 要使用哪些插件或预设呢?需要通过一个配置文件 .babelrc 。 

{
    "presets": [],
    "plugins": []
}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

为什么要使用纯净住宅代理?

随着互联网的快速发展,代理服务器已经成为许多在线活动的关键组成部分,从数据挖掘到网络安全。然而,随着技术的不断发展,住宅IP代理正崭露头角,因其在保障隐私、提升性能和应对封锁方面的卓越优势而备受瞩目。本文将深…

聚观早报 | 比亚迪秦PLUS荣耀版上市;任天堂成日本最富有公司

聚观早报每日整理最值得关注的行业重点事件,帮助大家及时了解最新行业动态,每日读报,就读聚观365资讯简报。 整理丨Cutie 2月20日消息 比亚迪秦PLUS荣耀版上市 任天堂成日本最富有公司 理想汽车2024春季发布会 真我12 Pro系列国内官宣 …

读《能力陷阱》的一些随想

一、引言 这本书是由埃米尼亚.伊贝拉所写,作者是哈佛大学商学院和欧洲工商管理学院组织行为学教授。《能力陷阱》是一本由埃米尼亚伊贝拉所著的畅销书籍,它为我们揭示了如何摆脱自我限制,并释放出潜在的无限能力。在阅读这本书的过程中&#…

计算机视觉的应用23-OpenAI发布的文本生成视频大模型Sora的原理解密

大家好,我是微学AI,今天给大家介绍一下计算机视觉的应用23-OpenAI发布的文本生成视频大模型Sora的原理解密。本文概况性地将Sora模型生成视频主要分为三个步骤:视频压缩网络、空间时间潜在补丁提取以及视频生成的Transformer模型。 文章目录…

使用倒模耳机壳UV村脂胶液制作HIFI耳机隔音降噪耳机壳推荐的材料和工艺流程?

对于使用倒模耳机壳UV树脂胶液制作HIFI耳机隔音降噪耳机壳,以下是一些推荐的材料和工艺流程: 材料: UV树脂胶液:选择适合倒模工艺的UV树脂胶液,要求具有高透明度、良好的流动性和固化性能。模具材料:根据…

Docker命令实战

文章目录 一、Docker常用命令-图谱二、基础实战命令2.1、查找镜像2.2、启动容器2.3、修改容器内容2.3.1、进入容器内部修改2.3.2、挂载数据到外部修改 2.4、提交改变2.5、镜像传输--将镜像保存成压缩包2.6、两台主机间压缩文件的传输拷贝2.7、推送阿里云个人远程镜像仓库2.8、其…

漫漫数学之旅027

文章目录 经典格言数学习题古今评注名人小传 - 约翰弥尔顿 经典格言 机会统治一切。——约翰弥尔顿(John Milton) 约翰弥尔顿,这位伟大的英国诗人曾掷地有声地说出:“机会统治一切。”这句话如果放在一场宇宙级的脱口秀中&#x…

(三十六)大数据实战——ClickHouse数据库的部署安装实现

前言 ClickHouse是俄罗斯的Yandex于2016年开源的列式存储数据库 DBMS ),使用C语言编写,主要用于在线分析处理查询( OLAP ),能够使用SQL查询实时生成分析数据报告。列式存储:数据按列进行存储&a…

wordpress企业网站模板免费

绿色风格的wordpress免费模板,经测试可以免费下载的WP模板。 https://www.wpniu.com/themes/300.html 简洁大气的文化艺术类wordpress模板,可以免费下载,实用易上手,新手也适合。 https://www.wpniu.com/themes/304.html 高端大…

微信小程序-绑定数据并在后台获取它

如图 遍历列表的过程中需要绑定数据&#xff0c;点击时候需要绑定数据 这里是源代码 <block wx:for"{{productList}}" wx:key"productId"><view class"product-item" bindtap"handleProductClick" data-product-id"{{i…

maven异常记录-must be unique

maven 打包异常记录 我们可以看看一个重要的异常&#xff1a; dependencies.dependency.(groupId:artifactId:type:classifier) must be unique: org.springframework.boot:spring-boot-starter-test 经过检查pom文件 果然是spring-boot-starter-test引用重复&#xff0c;平…

Elasticsearch:什么是搜索引擎?

搜索引擎定义 搜索引擎是一种软件程序或系统&#xff0c;旨在帮助用户查找存储在互联网或特定数据库中的信息。 搜索引擎的工作原理是对各种来源的内容进行索引和编目&#xff0c;然后根据用户的搜索查询向用户提供相关结果列表。 搜索引擎对于希望快速有效地查找特定信息的用…

SpringMVC 的参数绑定之list集合、Map

标签中name属性的值就是pojo类的属性名 参数绑定4 list [对象] <form action"teaupd.do" method"post"> <c:forEach items"${list}" var"tea" varStatus "status"> 教师编号&#xff1a;<input…

基础antdesign的业务型 短时间控件封装(复制即可使用)

{/* startFieldName 开始时间标识 endFieldName 结束时间标识 label 同form lable rules 是否开启规则校验 默认开启 detailData 详情数据&#xff0c;用于编辑回显 dateRange 限制结束时间的范围 例如&#xff1a;开始时间选择了 2024-02-05 &#xff0c;加上 dateRange3 后 只…

【MATLAB】BiGRU神经网络回归预测算法

有意向获取代码&#xff0c;请转文末观看代码获取方式~也可转原文链接获取~ 1 基本定义 BiGRU神经网络回归预测算法是一种基于双向门控循环单元&#xff08;GRU&#xff09;的多变量时间序列预测方法。该方法结合了双向模型和门控机制&#xff0c;旨在有效地捕捉时间序列数据中…

基于Java SSM框架实现生鲜食品o2o商城系统项目【项目源码+论文说明】计算机毕业设计

基于java的SSM框架实现生鲜食品o2o商城系统演示 摘要 随着社会的发展&#xff0c;社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 生鲜食品o2o商城系统&#xff0c;主要的模块包括查看管理员&#xff1b;首页、个人中心、用户…

Process Explorer下载安装使用教程(图文教程)超详细

「作者简介」&#xff1a;CSDN top100、阿里云博客专家、华为云享专家、网络安全领域优质创作者 「推荐专栏」&#xff1a;对网络安全感兴趣的小伙伴可以关注专栏《网络安全入门到精通》 Process Explore 是微软的一款「进程资源管理器」&#xff0c;比Windows系统自带的任务管…

科技云报道:云原生是大模型“降本增效”的解药吗?

科技云报道原创。 在过去一两年里&#xff0c;以GPT和Diffusion model为代表的大语言模型和生成式AI&#xff0c;将人们对AI的期待推向了一个新高峰&#xff0c;并吸引了千行百业尝试在业务中利用大模型。 国内各家大厂在大模型领域展开了激烈的军备竞赛&#xff0c;如&#…

每日学习总结20240219

每日总结 20240219 1.文件类型.csv CSV文件是一种以逗号分隔值&#xff08;Comma-Separated Values&#xff09;为标记的文本文件&#xff0c;它可以用来存储表格数据。每一行表示一条记录&#xff0c;而每一条记录中的字段则使用逗号或其他特定的分隔符进行分隔。 常用场景…

计算机服务器中了halo勒索病毒怎么办?Halo勒索病毒解密数据恢复

众所周知&#xff0c;网络是一把双刃剑&#xff0c;在为人们提供便利的同时&#xff0c;也会带来网络安全威胁。对于企业来说&#xff0c;企业的发展离不开核心数据支撑&#xff0c;数据安全问题是众多企业关心的主要话题。近日&#xff0c;云天数据恢复中心接到很多企业的求助…