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

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

posted @ 2022-12-26 11:41  China Soft  阅读(132)  评论(0编辑  收藏  举报