将ES6的语法转为ES5（为了兼容 ES5） (Babel)

掌握 ES6 之后，如果你的业务需要考虑 ES5 的兼容性，则可以这样做：写 ES6 语法的 js 代码，然后通过 Babel将 ES6 转换为 ES5。如果没有这样的需要，那么下面的内容，了解即可。

babel 的作用是将 ES6 语法转为 ES5 语法，支持低端浏览器。

以一个简单的案例说明

1. 先创建一个项目的目录

在 index.js 写入

let a = item => item + 2
console.log(a(4))
1
2
这个文件是一个 ES6 语法 的 js 文件，稍后，我们尝试把这个 ES6 语法的 js 文件转化为 ES5 的 js 文件。

// 本地安装 babel-preset-es2015 和 babel-cli：
npm install --save-dev babel-preset-es2015 babel-cli
1
2
2. 安装 Babel-cli
初始化项目：

在安装 Babel 之前，需要先用 npm init 先初始化我们的项目。打开终端或者通过 cmd 打开命令行工具，进入项目目录，输入如下命令：

npm init -y
1
上方代码中，-y 代表全部默认同意，就不用一次次按回车了（稍后再根据需要，在文件中手动修改）。命令执行完成后，会在项目的根目录下生成 package.json 文件：

{
"name": "babel",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}

1
2
3
4
5
6
7
8
9
10
11
12
13
3. 本地安装 babel-preset-es2015 和 babel-cli：
npm install --save-dev babel-preset-es2015 babel-cli
1
4. 新建.babelrc：
在根目录下新建文件.babelrc，输入如下内容：

{
"presets":[
"es2015"
],
"plugins":[]
}
1
2
3
4
5
6
5. 开始转换：
现在，我们应该可以将 ES6 的文件转化为 ES5 的文件了，命令如下：（此命令略显复杂）

babel src/index.js -o dist/index.js
1
我们可以将上面这个命令进行简化一下。操作如下：

在文件 package.json 中修改键 scripts中的内容：

"scripts": {
"build": "babel src/index.js -o dist/index.js"
},
1
2
3
目前为止，环境配置好了。以后，我们执行如下命令，即可将src/index.js这个 ES6 文件转化为 dist/index.js这个 ES5 文件：

npm run build
1
我们执行上面的命令之后，会发现， dist 目录下会生成 ES5 的 js 文件：

之后我们就可以在 index.html 中使用 es5的语法了

"use strict";

var a = function a(item) {
return item + 2;
};
console.log(a(4));
————————————————
版权声明：本文为CSDN博主「ximingx」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/ximing020714/article/details/123458969