es6 转es5_es6转换es5

es6 转es5_es6转换es5为什么要es6转es5?答:es6代码在老版本的浏览器中无法执行。怎么将es6代码转为es5代码,让其在老版本的浏览器中执行?答:使用babel模块,babel是一个使用非常广泛的es6转换器,这就意味着我们可以将es6代码转为es5代码,从而在老版本的浏览器中执行。使用步骤:新建一个新的用来编写es6代码的文件夹,进入到该文件中,初始化一个项目npminit表示一步步通过配置来初始化一个项目npminit-y表示使用默认设置来快速初始化一个项目局部安装babel-cli

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

Jetbrains全系列IDE稳定放心使用

为什么要es6转es5?

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

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

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

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

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

  1. 局部安装babel-clibabel-preset-latest模块

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

  1. 在文件目录下新建配置文件,名字为.babelrc,这是使用babel转化器的第一步设置
    {
      "presets":["latest"],
       "plugins": []
    }
  1. 使用命令进行转化

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,比如我们要学的IteratorGeneratorSetMapProxyReflectSymbolPromise等全局对象,以及定义在全局对象上的方法(比如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

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

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

  1. 接着使用babel命令转化即可
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/189914.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Google 地图切片URL地址解析

    Google 地图切片URL地址解析一、Google地图切片的投影方式及瓦片索引机制1.地图投影Google地图采用的是Web墨卡托投影(如下图),为了方便忽略了两极变形较大的地区,把世界地图做成了一个边长等于赤道周长的正方形(赤道半径为6378137米),原点在正方形中心,即经纬度为(0,0)处。Web墨卡托投影的X,Y坐标取值范围为:[-20037508.3427892,20037508.3427892]…

  • stm32编程入门教程_零基础编程入门书籍

    stm32编程入门教程_零基础编程入门书籍前言在中国,熟悉单片机的人士大多会听说过STM32。这是意法半导体(STMicroelectronics,简称ST)的32位微控制器(MCU)家族,基于ARMCortex-M内核。2007年,STM32F1诞生。这是业界首款搭载ARMCortex-M3内核的32位MCU,采用180nm闪存工艺,配有128KB闪存和20KBRAM,运行主频为72MHz,在当时属于相当高的配置。随后的10年内,STM32产品线相继加入了基于ARMCortex-M0、Cortex-M4和Cortex-M7…

  • 最小二乘法求回归方程的推导[通俗易懂]

    最小二乘法求回归方程的推导[通俗易懂]这里手写的最小二乘法​​​​​​​的推导过程。  

    2022年10月24日
  • 单点登录SSO解决方案之SpringSecurity+JWT实现

    单点登录SSO解决方案之SpringSecurity+JWT实现  通过前面几天文章我们详细的介绍了SpringSecurity的使用,本文我们来看下,结合JWT来实现单点登录操作。一、什么是单点登陆  单点登录(SingleSignOn),简称为SSO,是目前比较流行的企业业务整合的解决方案之一。SSO的定义是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统二、简单的运行机制  单点登录的机制其实是比较简单的,用一个现实中的…

  • no information is available_no data available什么意思

    no information is available_no data available什么意思解决方案一、打开魔术棒二、output→BrowseInfoemation三、重新编译就可以了

  • idea 2021.8激活码 mac_在线激活

    (idea 2021.8激活码 mac)JetBrains旗下有多款编译器工具(如:IntelliJ、WebStorm、PyCharm等)在各编程领域几乎都占据了垄断地位。建立在开源IntelliJ平台之上,过去15年以来,JetBrains一直在不断发展和完善这个平台。这个平台可以针对您的开发工作流进行微调并且能够提供…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号