ES6代码转ES5教程(babel安装使用教程)
需要用到的软件
Node.js + babel
Babel 是一个广泛使用的 ES6 转码器,可以将 ES6 代码转为 ES5 代码,从而在老版本的浏览器执行。这意味着,你可以用 ES6 的方式编写程序,又不用担心现有环境是否支持。下面是一个例子。
// 转码前
input.map(item => item + 1);// 转码后
input.map(function (item) {return item + 1;
});
进入正题,安装babel(安装之前请确保你已安装了node.js)
babel建议在项目中安装,不建议全局安装;
选择项目目录或新建一个目录,如E:/wwwroot/babel_test
安装命令:
npm install --save-dev @babel/core
Babel 的配置文件是.babelrc,存放在项目的根目录下。使用 Babel 的第一步,就是配置这个文件。
该文件用来设置转码规则和插件,基本格式如下。
{"presets": [],"plugins": []
}
presets字段设定转码规则,官方提供以下的规则集,你可以根据需要安装。
# 最新转码规则
$ npm install --save-dev @babel/preset-env# react 转码规则
$ npm install --save-dev @babel/preset-react
然后,将这些规则加入.babelrc。
{"presets": ["@babel/env","@babel/preset-react"],"plugins": []}
注意,以下所有 Babel 工具和模块的使用,都必须先写好.babelrc。
命令行转码
Babel 提供命令行工具@babel/cli,用于命令行转码。
它的安装命令如下。
npm install --save-dev @babel/cli
基本用法如下。
# 转码结果输出到标准输出
$ npx babel example.js# 转码结果写入一个文件
# --out-file 或 -o 参数指定输出文件npx babel example.js --out-file compiled.js
# 或者npx babel example.js -o compiled.js# 整个目录转码
# --out-dir 或 -d 参数指定输出目录npx babel 源目录 --out-dir 转后目录
# 或者npx babel 源目录 -d 转后目录# -s 参数生成source map文件npx babel 源目录 -d 转后目录 -s
如果觉得麻烦还可以通过网上在线转换1 ,在线转换2
ES6代码转ES5教程(babel安装使用教程)相关推荐
- babel—ES6代码转换为ES5代码
为什么要将ES6代码转换为ES5代码? 为了浏览器兼容,以及为了在node.js环境可以顺畅运行应用程序.ES6作为JS的新规范,加入了很多新的语法和API,但现代浏览器对ES6新特性支持度不高,所以 ...
- ES6代码转为ES5代码babel在线转换
ES6代码转为ES5代码babel在线转换 es6转es5还是很有用的.有的时间项目不大,不用配置webpack,就是个单页文件,又想用es6语法,写完可以直接转换一下就OK了.快捷方便. https ...
- 将ES6代码转换为ES5代码
ES6 代码转为 ES5 代码 (一)单个js文件解码 1 命令在项目目录中,安装Babel 2 配置文件.babelrc 3 安装转码规则 4 配置.babelrc 5 命令行转码 6 控制台转码输 ...
- ES6代码转ES5代码
在开发中我们可能会遇到需要将代码进行将版本的处理,这时就需要进行转码的操作,我们将用babel实现ES6代码转成ES5代码. 1.首先我们要先初始化项目 npm init,也可以使用npm init ...
- Traceur 转码器 将 ES6 代码转为 ES5 代码
文章摘自<ECMAScript 6 入门 > Traceur 允许将 ES6 代码直接插入网页.首先,必须在网页头部加载 Traceur 库文件 <script src=" ...
- python的安装教程-python安装教程 Pycharm安装详细教程
python安装教程和Pycharm安装详细教程,分享给大家. 首先我们来安装python 1.首先进入网站下载:点击打开链接(或自己输入网址https://www.python.org/downlo ...
- python要不要装pycharm-python安装教程 Pycharm安装详细教程
这篇文章主要介绍了python的安装教程,和Pycharm的安装详细教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 python安装教程和Pycharm安装详细教程,分享给大家. 首先我们来安 ...
- 2020mysql安装教程_2020MySQL安装图文教程
MySQL安装图文教程(Windows10) 1.MySQL下载 可以去MySQL官网下载,或者在我提供的百度云链接下载.官网下载网速较慢,我从官网下载了将近四个小时,然后把下载好的放在了百度网盘,需 ...
- python详细安装教程-python安装教程 Pycharm安装详细教程
这篇文章主要介绍了python的安装教程,和Pycharm的安装详细教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 python安装教程和Pycharm安装详细教程,分享给大家. 首先我们来安 ...
最新文章
- UDP收/发广播包原理及步骤
- 永远不要去依赖别人_读书心得马琴:永远不要依靠别人来保证你的安全读后感...
- 使用Docker搭建LAMP环境,上线wordpress
- 1190: [HNOI2007]梦幻岛宝珠 - BZOJ
- WinForm 自动完成控件实例代码简析
- Vijos P1974 金币【数列】
- iOS开发日记56-详解UIImage
- Java 序列化漏洞多到修不完
- Hibernate三大类查询总结
- Atitit 乱码的检测与纠正总结 目录 1. Atitit.request 乱码的检测与解决 attilax总结	1 1.1. 乱码的检测,,可以检测,列徐俩个问好??	1 1.2. 使用常用汉字
- 香农码字matlab,matlab实现香农编码
- Fortran 读取gps广播星历和精密星历
- TM32F103C8T6(晶振电路,复位电路,调试下载串口详解)
- 官方文档-Linux服务器集群系统(一)
- php背景四周向中间渐变色,使用CSS巧妙地制作背景色渐变动画实例
- 安全检查如何确保建筑幕墙施工的安全管理呢
- JDBC 基础、CRUD、分页 第一节
- 1-4 云商城项目工程搭建
- c语言编程给系统加密保护,C语言:模拟输入密码系统,三次以内正常通过,三次退出程序...
- 明源云采购颁奖盛典|欧金盾铝业荣膺“2020房企供应商10强”