es6 转es5_es6转换es5

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

为什么要es6转es5?

答：es6代码在老版本的浏览器中无法执行。

怎么将es6代码转为es5代码，让其在老版本的浏览器中执行？

答：使用babel模块，babel是一个使用非常广泛的es6转换器，这就意味着我们可以将es6代码转为es5代码，从而在老版本的浏览器中执行。
使用步骤：

1. 新建一个新的用来编写es6代码的文件夹，进入到该文件中，初始化一个项目

npm init 表示一步步通过配置来初始化一个项目
npm init -y 表示使用默认设置来快速初始化一个项目

2. 局部安装babel-cli、babel-preset-latest模块

npm install --save-dev babel-cli babel-preset-latest babel-cli是babel模块的一个命令行工具，babel-preset-latest是babel的转化规则

3. 在文件目录下新建配置文件，名字为.babelrc,这是使用babel转化器的第一步设置

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

4. 使用命令进行转化

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,控制台输出的依旧和原来的一样
这个时候就要使用垫片了

使用步骤：

1. 安装垫片

npm install --save-dev core-js regenerator-runtime

2. 在需要转化的文件中加入这两句

require('core-js');和require('regenerator-runtime');

3. 接着使用babel命令转化即可