Web前端 -- 利用Babel来将ES6转化为ES5代码
一、简介
Babel用来将ES6代码转为ES5代码。
二、安装
安装命令行转码工具
Babel提供babel-cli工具,用于命令行转码。它的安装命令如下:
npm install --global babel-cli
#查看是否安装成功
babel --version
三、Babel的使用
1、初始化项目
npm init -y
2、创建文件
src/example.js
下面是一段ES6代码:
// 转码前
// 定义数据
let input = [1, 2, 3]
// 将数组的每个元素 +1
input = input.map(item => item + 1)
console.log(input)
2、配置.babelrc
Babel的配置文件是.babelrc,存放在项目的根目录下,该文件用来设置转码规则和插件,基本格式如下。
{
"presets": [],
"plugins": []
}
presets字段设定转码规则,将es2015规则加入 .babelrc:
{
"presets": ["es2015"],
"plugins": []
}
3、安装转码器
在项目中安装
npm install --save-dev babel-preset-es2015
4、转码
# 转码结果写入一个文件
mkdir dist1
# --out-file 或 -o 参数指定输出文件
babel src/es6.js --out-file dist1/es5.js
# 或者
babel src/es6.js -o dist1/es5.js
# 整个目录转码
mkdir dist2
# --out-dir 或 -d 参数指定输出目录
babel src --out-dir dist2
# 或者
babel src -d dist2
Web前端 -- 利用Babel来将ES6转化为ES5代码的更多相关文章
- Web前端设计:Html强制不换行<nobr>标签用法代码示例
在网页排版布局中比如文章列表标题排版,无论多少文字均不希望换行显示,需要强制在一行显示完内容.这就可以nobr标签来实现.它起到的作用与word-break:keep-all 是一样的.nobr 是 ...
- Web前端开发最佳实践(9):CSS代码太太乱,重复代码太多?你需要精简CSS代码
前言 提高网站整体加载速度的一个重要手段就是提高代码文件的网络传输速度.之前提到过,所有的代码文件都应该是经过压缩了的,这可提高网络传输速度,提高性能.除了压缩代码之外,精简代码也是一种减小代码文件大 ...
- web前端利用HSTS(新的Web安全协议HTTP Strict Transport Security)漏洞的超级Cookie(HSTS Super Cookie)
web前端如果想实现cookie跨站点,跨浏览器,清除浏览器cookie该cookie也不会被删除这似乎有点难,下面的教程让你完全摆脱document.cookie 1.服务器端设置HSTS 如PHP ...
- 利用babel自动编译es6文件
一.检查File-Watchers中Babel的Arguments,有一项presets的设置,把他更改为=es2015,详细设置如下: $FilePathRelativeToProjectRoot$ ...
- 利用babel工具将es6语法转换成es5,Object.assign方法报错
一.新建工程初始化项目 1.新建工程文件夹这里起名叫做es6,然后在里面创建两个文件夹分别为src .dist如下图:(src为待转换es6 js存放目录,dist为编译完成后的es5 js存放目录) ...
- web前端利用turf.js生成等值线、等值面
样例如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> ...
- web前端利用leaflet生成粒子风场,类似windy
wind.js如下: $(function() { var dixing = L.tileLayer.chinaProvider('Google.Satellite.Map', { maxZoom: ...
- [Web 前端] React高级教程(es6)——(2)对于Refs最新变动的理解
cp : https://blog.csdn.net/liwusen/article/details/53384561 1.什么是ReactJS中的refs 在React中组件并不是真实的 DOM 节 ...
- web前端利用HTML代码显示符号
HTML常用符号代码: ´ ´ © © > > µ µ ® ® & & ° ° ¡ ¡ » » ¦ ¦ ÷ ÷ ¿ ¿ ...
- Webstorm上面通过babel将es6转化为es5
1.首先创建一个新的文件夹(名为do);2.然后再根目录下面新建一个package.json,只需要写明两个属性即name和version,这个没有必须要和下面我写的一致,可以自行定义. { &quo ...
随机推荐
- [学习笔记]Rocket.Chat业务数据备份
Rocket.Chat 的业务数据主要存储于mongodb数据库的rocketchat库中,聊天中通过发送文件功能产生的文件储存于/app/uploads中(文件方式设置为"FileSyst ...
- axios post xml data方法
axios#request(config) axios#get(url[,config]) axios#delete(url[,config]) axios#head(url[,config]) ax ...
- WPF之事件
目录 WPF的树形结构 事件 路由事件 使用WPF内置路由事件 自定义路由事件 ButtonBase类的Click路由事件 创建一个路由事件 RoutedEventArgs的Source与Origin ...
- linux环境下基于python的OpenCV 保存视频
一 概念 在OpenCV中保存视频使用的是VedioWriter对象,在其中指定输出文件的名称, A 创建视频写入的对象 out = cv2.VideoWriter(filename,fourcc, ...
- springboot打印启动信息
打印启动信息 转载自:www.javaman.cn 1 spring Bean实例化流程 基本流程: 1.Spring容器在进行初始化时,会将xml或者annotation配置的bean的信息封装成一 ...
- Java/Kotlin Double保留小数点后几位
下面以保留2位小数,且按照四舍五入规则的例子 方法 1.BigDecimal.setScale() 此方法得到的还是个double数值 double one = 5.864; BigDecimal t ...
- C++ 调用 Python 总结(一)
PS:要转载请注明出处,本人版权所有. PS: 这个只是基于<我自己>的理解, 如果和你的原则及想法相冲突,请谅解,勿喷. 前置说明 本文作为本人csdn blog的主站的备份.(Bl ...
- 瑞云与宜宾职院开展校企合作,同深圳VR联合会共建元宇宙产业学院
2022年7月9日,宜宾职业技术学院携手深圳市虚拟现实产业联合会和深圳市瑞云科技有限公司,合作共建的"元宇宙职业教育研究与应用中心"."元宇宙产业学院"授牌仪式 ...
- TP6框架--EasyAdmin学习笔记:项目初始化+环境配置
最近在研究一个基于TP6的框架EasyAdmin,这里分享下我的开发心得 首先要获取原始项目文件 这里是git地址 https://github.com/zhongshaofa/easyadmin 项 ...
- KingbaseES V8R6 集群运维案例 -- 禁止普通用户su到root
案例说明: 在集群管理中,会使用到root权限(如ip.aring命令等),为安全需要,有的生产环境禁止普通用户su切换到root,本案例测试了禁止普通用户su切换到root对集群管理带来的影响. 集 ...