ES6代码转ES5代码

2024-06-10 06:50:25

在开发中我们可能会遇到需要将代码进行将版本的处理，这时就需要进行转码的操作，我们将用babel实现ES6代码转成ES5代码。

1.首先我们要先初始化项目

npm init，也可以使用npm init -y,如果使用后者是为了快速初始化项目，因为这里的y指的是yes/no里的y，默认将提问是否需要继续执行下去的环节去掉而直接执行。可以看到初始化项目之后会生成一个package.json的文件

2.安装转码工具

cnpm install -g babel-cli 全局安装

cnpm install --save -dev babel-cli babel-preset-latest

3.安装转换规则

cnpm install -g babel-preset-latest

4.指定转换规则

在文件夹中新建一个.babelrc文件，{
"presets":["latest"]
}，如下图

代表我们需要的是最新的转换规则

5..下面我们通过示例将ES6转换为ES5后输入到另一个文件中

初始化项目文件夹之后，我会发现该文件夹下面会有一个src文件夹，在src文件夹目录下新建一个hello.js文件，如下图

然后我们在项目文件夹下新建一个dist文件夹用来存放转换之后的文件

在src文件夹目录下的hello.js文件写入如下箭头函数代码：

let a = 1// 箭头函数 (形式参数) {函数体}
let test = () => {console.log('箭头函数');}

然后在集成终端中打开项目文件夹，输入命令：babel 1-hello.js

回车后看到如下图，表示我们已经将ES6代码转为ES5代码了（声明变量由let变为const）

再在集成终端中输入命令：babel 1-hello.js --out-file 2-a.js

可以看到src目录下生成2-a.js文件，这是转为ES5代码之后的文件

最后我们输入命令：babel src --out-dir dist

这样就把当前js文件都输出到dist文件夹目录下了

ES6代码转ES5代码相关推荐

将ES6代码转换为ES5代码
ES6 代码转为 ES5 代码 (一)单个js文件解码 1 命令在项目目录中,安装Babel 2 配置文件.babelrc 3 安装转码规则 4 配置.babelrc 5 命令行转码 6 控制台转码输 ...
babel—ES6代码转换为ES5代码
为什么要将ES6代码转换为ES5代码? 为了浏览器兼容,以及为了在node.js环境可以顺畅运行应用程序.ES6作为JS的新规范,加入了很多新的语法和API,但现代浏览器对ES6新特性支持度不高,所以 ...
ES6代码转为ES5代码babel在线转换
ES6代码转为ES5代码babel在线转换 es6转es5还是很有用的.有的时间项目不大,不用配置webpack,就是个单页文件,又想用es6语法,写完可以直接转换一下就OK了.快捷方便. https ...
Traceur 转码器将 ES6 代码转为 ES5 代码
文章摘自<ECMAScript 6 入门 > Traceur 允许将 ES6 代码直接插入网页.首先,必须在网页头部加载 Traceur 库文件 <script src=" ...
ES6代码转为ES5代码的在线转换工具以及运行工具
学习es6是一个很有意思的过程,里面新增的语法及语法糖都能大大减少我们的代码量,但有些语法是目前浏览器无法支持的,所以我们需要转换一下,为了方便学习以及测试,下面推荐两款使用的es6在线转换工具 1. ...
babel（ES6转码工具）转码（将ES6代码转为ES5代码）
安装babel: 一 )打开vscode终端(powershell) 终端输入: cnpm install --save-dev @babel/core 二)项目根目录下存放配置文件新建文件--.b ...
ES6代码转为ES5代码的在线转换工具
1.Babel,在线转换地址 2.Traceur,Google公司出品,在线转换地址
ES6中的class是如何实现的？（附Babel编译的ES5代码详解）
序言这篇文章主要讲解面试某大厂遇到的一个问题 - ES6中的class语法的实现? ECMAScript 6 实现了class,class是一个语法糖,使得js的编码更清晰.更人性化.风格更接近面向 ...
ES6代码转ES5教程(babel安装使用教程)
需要用到的软件 Node.js + babel Babel 是一个广泛使用的 ES6 转码器,可以将 ES6 代码转为 ES5 代码,从而在老版本的浏览器执行.这意味着,你可以用 ES6 的方式编写程 ...

最新文章

热门文章