首页 > 其他分享 >使用Babel将ES6代码转为ES5代码,从而在现有环境执行。

使用Babel将ES6代码转为ES5代码,从而在现有环境执行。

时间:2022-12-26 11:59:05浏览次数:32  
标签:ES6 ES5 转码 babel 代码 https Babel

https://blog.csdn.net/weixin_44797182/article/details/127622359

前言
在线转码 https://babeljs.io/repl/#
https://es6console.com/

1.快速入门
(1)ES6的某些高级语法在浏览器环境甚至是Node.js环境中无法执行。
(2)Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。
(3)这意味着,你可以现在就用 ES6 编写程序,而不用担心现有环境是否支持。

文件目录如下


2.安装使用
安装命令行转码工具
Babel提供babel-cli工具,用于命令行转码。它的安装命令如下:

npm install -g babel-cli
#查看是否安装成功
babel --version
1
2
3


3、初始化项目
npm init -y

1
2


4、创建文件 src/test1.js,写入es6语法代码(需要转换的文件)
//es6语法
let name = "this is java!"
const title = "张三";
let arr = [1,2,3,4,5,6];
let newarr = arr.map(a=>a*2);
console.log(name);
console.log(title);
console.log(newarr);

1
2
3
4
5
6
7
8
9
5、创建、配置 .babelrc
Babel的配置文件是.babelrc,存放在项目的根目录下,该文件用来设置转码规则和插件

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

1
2
3
4
5
6、安装转码器,在项目中安装
npm install --save-dev babel-preset-es2015

1
2
7、开始转码
执行完之后我们执行babel src -d dist,这个的意思是将src所有的文件都编译成ES2015格式放入dist目录之下。

babel src -d dist
1

 

熟悉的新风景
关注

————————————————
版权声明:本文为CSDN博主「熟悉的新风景」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_44797182/article/details/127622359

标签:ES6,ES5,转码,babel,代码,https,Babel
From: https://www.cnblogs.com/chinasoft/p/17005400.html

相关文章

  • 将ES6的语法转为ES5(为了兼容 ES5) (Babel)
    掌握ES6之后,如果你的业务需要考虑ES5的兼容性,则可以这样做:写ES6语法的js代码,然后通过Babel将ES6转换为ES5。如果没有这样的需要,那么下面的内容,了解即可。babe......
  • Java代码打包
    Java代码打包一:IDEA工具1、右侧的maven直接clean后package2、终端命令mvncleanpackage3、项目结构,创建工件,选择清单属性,构建工件4、指定主类打包、含多个类的jar打......
  • PE格式:新建节并插入代码
    PE格式是Windows下最常用的可执行文件格式,理解PE文件格式不仅可以了解操作系统的加载流程,还可以更好的理解操作系统对进程和内存相关的管理知识,而有些技术必须建立在了......
  • 一文告诉你如何选择低代码供应商?
    低代码(零代码)软件平台、套件、工具和相关服务正在快速地广泛普及和扩展。现在许多人都知道,低代码软件解决方案提供的加速器和自动化,可以加速软件应用程序开发人员的工作……......
  • 一文读懂什么是低代码开发?
    世界在应用程序上运行,商业世界也不例外。**面对变化,企业过去依赖的传统应用程序开发流程可能不再有效。从头开始构建软件解决方案需要花费数月甚至数年的时间来规划、设计......
  • HTML5大文件上传详解及实例代码
    ​ 对于大文件的处理,无论是用户端还是服务端,如果一次性进行读取发送、接收都是不可取,很容易导致内存问题。所以对于大文件上传,采用切块分段上传,从上传的效率来看,利用多......
  • CodeQL的自动化代码审计之路(下篇)
    0x01前言在上一篇文章中,我们基于CodeQL官方提供的sdk实现了自动化查询数据库功能,在文章中也提到实现完整的自动化代码审计还缺少“数据库生成”相应的功能,本文主要针对“数......
  • 三星电视无法下载《条款和条件、隐私政策》的问题 (消息代码: 0-1)
    问题背景自打政治上不睦后,韩国产品在我国就遇冷了,前有乐天玛特,后有三星,特别是三星手机,市占率从第一到现在份额小到归入"其它",另外像三星电视、显示器的遭遇也都差不多。如......
  • 代码随想录算法训练营Day24|77. 组合
    代码随想录算法训练营Day24|77.组合回溯基础回溯的本质是穷举,穷举所有可能,然后选出我们想要的答案,常见的问题类型为:组合问题:N个数里面按一定规则找出k个数的集合切割......
  • 代码随想录算法训练营Day25|216. 组合总和 III、17. 电话号码的字母组合
    代码随想录算法训练营Day25|216.组合总和III、17.电话号码的字母组合216.组合总和III216.组合总和III与「77.组合」类似,但区别在于题干要求的变化:只使用数字1......