Babel快速入门

news2024/10/6 14:28:07
一、简介
Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有环境执行执行。
这意味着,你可以现在就用 ES6 编写程序,而不用担心现有环境是否支持。
二、安装
安装命令行转码工具
Babel提供babel-cli工具,用于命令行转码。它的安装命令如下:
1 npm install --global babel-cli
2
3 # 查看是否安装成功
4 babel --version

 

三、Babel的使用
1、初始化项目
1 npm init -y
2、创建文件
src/example.js
下面是一段ES6代码:
1 // 转码前 2 // 定义数据
3 let input = [ 1 , 2 , 3 ]
4 // 将数组的每个元素 +1
5 input = input.map( item => item + 1 )
6 console.log(input)
2、配置.babelrc
Babel的配置文件是.babelrc,存放在项目的根目录下,该文件用来设置转码规则和插件,基本格
式如下。
1 {
2 "presets" : [],
3 "plugins" : []
4 }
presets 字段设定转码规则,将 es2015 规则加入 .babelrc
1 {
2 "presets" : [ "es2015" ],
3 "plugins" : []
4 }
3、安装转码器
在项目中安装
1 npm install --save-dev babel-preset-es2015
4、转码
1 # 转码结果写入一个文件
2 mkdir dist1 3 # --out-file -o 参数指定输出文件
4 babel src/example.js --out-file dist1/compiled.js
5 # 或者
6 babel src/example.js -o dist1/compiled.js
7
8 # 整个目录转码
9 mkdir dist2
10 # --out-dir -d 参数指定输出目录
11 babel src --out-dir dist2
12 # 或者
13 babel src -d dist2

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

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

相关文章

Mysql调优(三)——通过索引进行优化、 查询优化

接上:Mysql调优(二)——schema与数据类型优化、执行计划 本篇文章在一定程度上与下面两篇文章重合,笔者建议优先读下面两篇文章,本文偏向概念,而它们偏向原理: Mysql索引的本质深入浅出&#x…

全栈Jmeter接口测试(五):json提取器元件及jsonpath介绍,响应断言元件

Jmeter(10):json提取器元件及jsonpath介绍 json提取器元件介绍: json提取器与正则表达式提取器功能类似,也是用来截取响应信息的部分保 存到指定的变量中去,不同的是,它只能用来处理响应正文,并且响应正文…

ITE Super IO 学习 – 串口

串口都算是一个比较古老的功能了,也就是比较成熟了。Super IO中的大部分是硬件已经做好的,BIOS这边只需做小小的改动甚至默认便可以工作了。 串口寄存器 串口有关的寄存器总的来说有4个,两个用来设置IO资源的地址,一个是中断号选择,还有一个特殊配置寄存器。 Seri…

高级路由期末命令配置

文章目录前提要求(1)拓扑图搭建及IP地址规划拓扑图配置:IP地址表规划表1网络连接规划表表2 网络设备明细表表3 IP规划表(2)OSPF(3)BGP(4)路由引入(5)路由选择&#xff08…

PicoDet代码学习记录

推理步骤 [picodet_s_320_coco.yml] Infer.py main()->run()Trainer.py __init__() self.model create(cfg.architecture) Picodet.py from_config()->__init__() head create(cfg[head], **kwargs)时候调用: Layers.py MultiClassNMS __…

Django(一)

一、Django介绍 1、python语言编写的开源web框架 2、重量级python web框架,配备了常用的大部分组件 3、组件: ※基本配置文件/路由系统 ※模型层(M)/模板层(T)/视图层(V) ※co…

Cadence创建插件焊盘(超详细)

背景:Cadence画封装,在我看来,操作是比较不方便的事儿,所以在此在记录一遍。要画一个插件封装,需要调用画好的焊盘(AD里直接设置即可),另外放置好pin的位置和绘制好边框。包括遇到的…

SpringBoot集成阿里EasyExcel导出excel高级实战

目录参考一、引入包二、导出到文件并输出到后台三、过滤字段方式1:类上加注解 ExcelIgnoreUnannotated,过滤属性没有ExcelProperty注解的字段方式2:指定字段加注解方式3:代码指定过滤字段, 同一个excel生成两个sheet分别过滤不同字…

clickhouse集群搭建

一、clickhouse单机部署 clickhouse镜像下载地址 https://mirrors.tuna.tsinghua.edu.cn/clickhouse/ 1、关闭防火墙 #查看防火墙状态systemctl status firewalld#关闭防火墙systemctl stop firewalld#设置防火墙服务开机不自启systemctl disable firewalld#再次查看防火墙检…

开源软件如何使企业和业务受益

在当今技术驱动、快速发展的商业环境中,越来越多的公司选择投资开源软件。开源为企业提供了许多优势:更快的创新步伐、来自庞大而热情的社区的强大支持以及不受供应商锁定的影响。 对于许多人来说,开源不仅仅是编码。它代表了一种生活方式。…

使用IDEA工具,通过Java API 操作 HDFS (文件/目录的操作,含源码,详细操作步骤)

文章目录一,了解 HDFS Java API(一)HDFS常见类与接口(二)FileSystem的常用方法二,编写Java程序访问HDFS01 创建Maven项目02 添加相关依赖03 创建日志属性文件(1)在resources目录里创…

2022年还剩半个月,我从外包公司离职了...

今天是12.12,距离元旦也仅剩半个月,大家都在考论假期怎么过,没错,我离职了... 19年大专毕业通过校招进入了一家外包公司,干了接近3年的功能测试,今年年初,感觉自己不能够在这样下去了&#xff…

MyBatis 注解开发

文章目录一、单表查询1. Select 注解2. Insert 注解3. Update 注解4. Delete 注解5. Param 注解二、多表关联查询1. 一对一查询2. 一对多查询3. 多对多查询一、单表查询 1. Select 注解 前面的章节介绍了 MyBatis 的基本用法、关联映射、动态 SQL 和缓存机制等知识&#xff0…

[附源码]计算机毕业设计房屋租赁系统Springboot程序

项目运行 环境配置: Jdk1.8 Tomcat7.0 Mysql HBuilderX(Webstorm也行) Eclispe(IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持)。 项目技术: Springboot mybatis MavenVue等等组成,B/S模式…

算法竞赛入门【码蹄集进阶塔335题】(MT2201-2225)

算法竞赛入门【码蹄集进阶塔335题】(MT2201-2225) 文章目录算法竞赛入门【码蹄集进阶塔335题】(MT2201-2225)前言为什么突然想学算法了?为什么选择码蹄集作为刷题软件?目录1. MT2201 字符串转换2. MT2202 Summer Pockets3. MT2203…

alsa框架与音频芯片移植基础

ALSA音频框架 Alsa是Advanced Linux Sound Architecture的缩写,即高级Linux声音架构,在Linux操作系统上提供了对音频和MIDI的支持。在Linux 2.6的内核版本后,Alsa目前已经成为了linux的主流音频体系结构。 除了 alsa-driver,ALS…

CSS -- 使用纯CSS绘制三角形及常见案例汇总

文章目录1. 绘制原理2. 绘制最简单的三角形3. 绘制对话框4. 绘制两条直角边不等长的三角形1. 绘制原理 网页中常见一些三角形,使用 CSS 直接画出来就可以,不必做成图片或者字体图标 给每个边框不同的颜色可以看到,每个边框其实都是一个小三…

测试(缺陷管理)

目录 1.缺陷管理理论 1.1.定义 1.2缺陷的名称 1.3.产生缺陷的原因 1.4.缺陷管理流程 1.5.缺陷管理生命周期与状态 2.如何提交缺陷 2.1.提交的Bug的目的 2.2.提交Bug的注意事项 2.3.提交Bug报告应遵循的原则 2.4.Bug报告需包含哪些内容 1.缺陷管理理论 1.1.定义 软件…

rust编程-rust所有权理解(chapter 4.3 Slice切片类型)

目录 3. 切片(Slice)类型 3.1 String slice(字符串切片) 3.2 其它切片 3. 切片(Slice)类型 切片可以用来获取一个集合中连续的元素序列,且切片是一种引用类型,因此不具有所有权。 如下是一个小的编程示…

day17_面向对象的三大特征之一(多态)

概述 多态是继封装、继承之后,面向对象的第三大特性。 生活中,比如求面积的功能,圆、矩形、三角形实现起来是不一样的。跑的动作,小猫、小狗和大象,跑起来是不一样的。再比如飞的动作,昆虫、鸟类和飞机&a…