es6 转es5_es6转换es5

大家好，又见面了，我是你们的朋友全栈君。

为什么要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-latest babel-cli是babel模块的一个命令行工具，babel-preset-latest是babel的转化规则

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

代码语言：javascript复制

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

使用命令进行转化

babel example.js 转码结果输出到控制台 babel a.js --out-file b.js –out-file 或 -o 参数指定输出文件 babel src --out-dir dist –out-dir 或 -d 参数指定输出目录

实例：

代码语言：javascript复制

//转化之前为es6
let test = () => { 
   
    console.log("hello world");
}

经过babel-cli命令行工具和babel-preset-latest预设规则，转化后为如下带啊吗:

代码语言：javascript复制

"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函数的转码)，为当前环境提供一个垫片

实例：未使用垫片时:

代码语言：javascript复制

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命令转化即可

javascript npm ecmascript babel.js

0 人点赞