babel转换es6_ideamaven依赖配置

babel转换es6_ideamaven依赖配置用Babel-cli将ES6转ES5一、为什么要转ES5   虽然ES6非常好用,但并不是所有浏览器所有客户端都适应ES6的,降成ES5是为了更强的使用性。二、安装转换工具babel-cli1.第一步初始化文件夹(如果已经有package.json文件说明已经初始化过了,可以跳过)右键在文件夹在终端中打开,输入命令npminit-y或者cnpminit-y2.在终端继续输入命令cnpminstall–globalbabel-cli安装ba

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

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

用Babel-cli将ES6转ES5

一、为什么要转ES5

      虽然ES6非常好用,但并不是所有浏览器所有客户端都适应ES6的,降成ES5是为了更强的使用性。我一直不关注这个东西,直到有人和我说,你做的东西很好,但是对不起,我82年的浏览器显示不出来

二、安装转换工具 babel-cli

1.第一步初始化文件夹(如果已经有package.json文件说明已经初始化过了,可以跳过)
右键在文件夹在终端中打开,输入命令npm init -y或者cnpm init -y
在这里插入图片描述
2.在终端继续输入命令cnpm install --global babel-cli安装 babel-cli
在这里插入图片描述

3.在终端继续输入命令cnpm install --save-dev babel-preset-latest --save-dev安装预设(转码标准)
在这里插入图片描述

4.在文件夹下创建.babelrc配置文件,并在里面写上以下内容

{ 
   
    "presets":"latest"
}

在这里插入图片描述

三、开始转换

1.单文件转换
假如我要将名为ES6.js的es6文件转化成名为ES5.js的ES5文件,在终端输入以下命令

babel .\01-ES6.js --out-file 01-es5.js               

你会发现文件夹目录下新增了一个文件
在这里插入图片描述

里面的内容已经变成ES5能使用的语法了
在这里插入图片描述
let变成了var
const变成了var
箭头函数也变成了普通函数

2.批量转换:

src文件夹里的全部文件转换后,新建一个dist文件夹存储转换后的文件
操作
输入命令 babel src --out-dir dist
简写 babel src -d dist

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/192892.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 短视频解析接口搭建_小程序 开发文档

    短视频解析接口搭建_小程序 开发文档接口开发文档去水印接口请求地址:https://api.srvv.cn/api/video/32AFD1F6A24A3A49921AB80AE1C58035ED01CC5DF282B23D79/2/?url={短视频链接,记住是纯链接}接口申请地址:api.srvv.cn请求方式:GET返回格式:JSON请求参数说明:字段必填类型说明url是String短视频分享的URL返回参数说明:…

    2022年10月3日
    0
  • cultureinfo 类 java_System.Globalization.CultureInfo.cs(示例代码)

    cultureinfo 类 java_System.Globalization.CultureInfo.cs(示例代码)#region程序集mscorlib,Version=4.0.0.0,Culture=neutral,PublicKeyToken=b77a5c561934e089//C:ProgramFiles(x86)ReferenceAssembliesMicrosoftFramework.NETFrameworkv4.6.1mscorlib.dll#endregionusingSystem…

    2022年6月19日
    31
  • 常用的表单元素有哪些_h5新增的表单元素属性

    常用的表单元素有哪些_h5新增的表单元素属性这里是修真院前端小课堂,每篇分享文从【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】八个方面深度解析前端知识/技能,本篇分享的是:【常见的表单元素有哪些?各有什么属性?】大家好,我是IT修真院北京分院第23期学员。今天小课堂的主要内容是,input表单的应用,还有在html5中新增的属性。表单元素是允许用户在表单中(比如:文…

    2022年10月23日
    1
  • Deep Link

    Deep LinkDeepLink是什么DeepLink,又叫deeplinking,中文翻译作深层链接。全家桶搜索的话你会发现第一个结果是AppLink。呵呵。说回正题。简单地从用户体验来讲,DeepLink,就是可以让你在手机的浏览器/GoogleSearch上点击搜索的结果,便能直接跳转到已安装的应用中的某一个页面的技术。如果你想体验的话,可以在Android4.1以上设备安装IMDB,然后在Go…

    2022年6月18日
    74
  • SpringBoot + mybatis 分页查询

    SpringBoot + mybatis 分页查询com.github.pagehelper.PageHelper是一款好用的开源免费的Mybatis第三方分页插件。使用的时候,只要简单配置,就可以在查询语句之后得到所需的分页信息。1:在pom.xml中引入依赖项。dependency>groupId>com.github.pagehelpergroupId>artifactId>pagehelperarti

    2022年5月5日
    52
  • 开关三极管的导通和截止条件「建议收藏」

    开关三极管的导通和截止条件「建议收藏」转自:https://blog.csdn.net/ruanjianruanjianruan/article/details/38523973三极管在我们数字电路和模拟电路中都有大量的应用,在我们开发板上也用了多个三极管。在我们板子上的LED小灯部分,就有这个三极管的应用了,图3-5的LED电路中的Q16就是一个PNP型的三极管。图3-5 LED电路三极管的初步认识三极管是一…

    2022年6月16日
    135

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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