为什么要es6转es5?
答：es6代码在老版本的浏览器中无法执行。
怎么将es6代码转为es5代码，让其在老版本的浏览器中执行？
答：使用babel模块，babel是一个使用非常广泛的es6转换器，这就意味着我们可以将es6代码转为es5代码，从而在老版本的浏览器中执行。
使用步骤：
- 新建一个新的用来编写es6代码的文件夹，进入到该文件中，初始化一个项目
npm init表示一步步通过配置来初始化一个项目
npm init -y表示使用默认设置来快速初始化一个项目
- 局部安装
babel-cli、babel-preset-latest模块
npm install --save-dev babel-cli babel-preset-latestbabel-cli是babel模块的一个命令行工具，babel-preset-latest是babel的转化规则
- 在文件目录下新建配置文件，名字为
.babelrc,这是使用babel转化器的第一步设置
{
"presets":["latest"],
"plugins": []
}
- 使用命令进行转化
babel example.js转码结果输出到控制台
babel a.js --out-file b.js–out-file 或 -o 参数指定输出文件
babel src --out-dir dist–out-dir 或 -d 参数指定输出目录
实例：
//转化之前为es6
let test = () => {
console.log("hello world");
}
经过babel-cli命令行工具和babel-preset-latest预设规则，转化后为如下带啊吗:
"use strict";
var test = function test() {
console.log("hello world");
};
注意点：所有 Babel 工具和模块的使用，都必须先写好.babelrc，即安装好babel-preset-latest并配置好.babelrc才能正常使用
但是babel转化器默认只会新的JavaScript句法，而不转换新的API，比如我们要学的Iterator、Generator、Set、Map、Proxy、Reflect、Symbol、Promise等全局对象，以及定义在全局对象上的方法(比如Object.assign)都不会转码
举例来说，ES6 在Array对象上新增了Array.from方法。Babel 就不会转码这个方法。如果想让这个方法运行，可以使用core-js和regenerator-runtime(后者提供generator函数的转码)，为当前环境提供一个垫片
实例：
未使用垫片时:
var arr = [1, 2, 3, 2];
var arr_new = Array.from(arr);
console.log(arr_new);
使用命令babel xxx.js,控制台输出的依旧和原来的一样
这个时候就要使用垫片了
使用步骤：
- 安装垫片
npm install --save-dev core-js regenerator-runtime
- 在需要转化的文件中加入这两句
require('core-js');和require('regenerator-runtime');
- 接着使用babel命令转化即可
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/189914.html原文链接：https://javaforall.net
