babel转译: es6转es5

2023-11-08

1.ECMAScipt和JavaScript的关系

96年javascript之父netscape  交给国际标准组织ECMA管理,

ECMAScipt是javascript的一种规范,javascript是ECMAJavascript的一种实现

2.ECMAScript 的历史 

1997      1.0

1998/6    2.0

1999/12   3.0

2000      4.0(开始设计)(es6中大量继承)

2007      yahoo、微软、google等公司的分歧

2008      终止4.0发布 在3的基础上做小的改动发布为3.1,不久更名为5.0

2011      5.1发布成为国际标准

2013/3      6.0草案冻结,新的想法放入下一个版本

2013/12    6.0草案发布,12个月的讨论期

2015/6    6.0正式发布,成为国际标准  

3.ES6 与 ECMAScript 2015 的关系

2011年,ECMAScript 5.1版发布后,就开始制定6.0版了,ES6 这个词的原意,就是指 JavaScript 语言的下一个版本。

ECMAScript 2015(简称 ES2015)ES6 的第一个版本, 2015年6月发布

2016年6月 (ES2016)  2017年6月 (ES2017)

4.Babel转码器

全局安装:

Npm install -g babel-cli

项目安装:

npm install --save-dev babel-cli

转码规则安装:

npm install --save-dev babel-preset-latest

npm install --save-dev babel-preset-es2015

npm install --save-dev babel-preset-stage-0 //es7

npm install --save-dev babel-preset-stage-1

npm install --save-dev babel-preset-stage-2

npm install --save-dev babel-preset-stage-3

配置文件:(对象的形式)

{

"presets": [

       "stage-2"

    ],

    "plugins": []

}

转码命令:

babel 01.js -o _01.js    //文件输出到文件

babel src -d lib -s      //目录输出到目录  -s为生成map文件

REPL工具babel-node直接运行:

使用:

babel-node 01.js

babel-register:

babel-register模块改写require命令,为它加上一个钩子。此后,每当使用require加载.js、.jsx、.es和.es6后缀名的文件,就会先用Babel进行转码。首先加载babel-register,只会对require命令加载的文件转码,而不会对当前文件转码

babel-core 在文件中使用api进行转换:

项目安装:

Npm install babel-core --save-dev

浏览器环境:

<script src="https://cdnjs.cloudflare.com/ajax/libs/babelstandalone/6.4.4/babel.min.js">

</script>

<script type="text/babel">

</script>

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

babel转译: es6转es5 的相关文章

  • 3分钟搞懂:JavaScript 和 ECMAScript

    JavaScript 和 ECMAScript ECMAScript 是 JavaScript 语言的国际标准 JavaScript 是 ECMAScript 的一种实现 Adobe ActionScript 和 JScript 同样实现了
  • js双层循环拿到二层循环的index值

    情景描述 多个房间 每个房间的人数不尽相同 后端获取的数据格式是根据房间走的 如 data roomNo 201 guestList name 张三 name 李四 roomNo 202 guestList name 张三三 name 李四
  • 对象常用的方法

    思维导图 对象中常用的方法 Object prototype 1 hasOwnProperty 方法会返回一个布尔值 指示对象自身属性中是否具有指定的属性 也就是 是否有指定的键 检测是否为私有属性 即使属性的值是 null 或 undef
  • ES6知识点总结——学习网站及环境搭建

    1 ES6学习网站 ES6官网 https 262 ecma international org 6 0 阮一峰ES6学习电子书 https es6 ruanyifeng com docs let W3Cschool ES6中文教程 htt
  • git提交代码报 vue-cli-service lint found some errors. Please fix them and try committing again

    原因 问过度娘在提交代码的时候 它会在提交代码前运行做代码风格检查 如果代码不符合相应规则 则报错 解决 直接把pre commit文件删除 进入项目 git文件夹 hooks 删除 如何你的项目文件夹下没有找到 git文件夹 检查一下看看
  • 2023最全最新前端面试题(附加解答)

    JS 1 说一下innerHTML 与 innerText的作用与区别 作用 都可以获取或者设置元素的内容 区别 innerHTML可以解析内容中的html标签 innerText不能解析内容中的html标签 2 JavaScript 由以
  • JS数组与对象数据格式互相转换

    JS数组与对象数据格式互相转换 一 二维数组转数组对象 开发过程中后端传过来的数据和自己需要的数据格式不统一 需要数据格式的转化 let twoArr 20 30 40 30 40 50 40 50 60 let keys name1 na
  • ES6箭头函数(三)-应用场景

    直接作为事件handler document addEventListener click ev gt console log ev 作为数组排序回调 var arr 1 9 2 4 3 8 sort a b gt if a b gt 0
  • Vue.js中的v-model指令(双向绑定)

    Vue js中v model的作用 v model的作用和使用场景 1 v model的作用 双向绑定 2 v model双向绑定的使用场景 表单 3 总结 v model的作用和使用场景 你好 Vue js作为现在最为常用的前端框架之一
  • Vue刻度尺组件

    1 安装刻度尺组件 npm install cs ruler 2 在main js中全局引入组件 import CsRuler from cs ruler 刻度尺组件 Vue use CsRuler 3 组件使用
  • 【ES6】Set 和 Map 数据结构

    文章目录 前言 一 Set 1 用法详解 1 1 声明方式 1 2 遍历的四种方式 2 应用场景 2 1 数组去重 2 2 合并去重 2 3交集 2 4 差集 3 WeakSet 二 Map 1 用法详解 1 1 声明方式 1 2 遍历的四
  • 【学一点儿前端】box-sizing以及flex:1的解释

    box sizing box sizing 是一种用于控制CSS盒子模型行为的CSS属性 它的作用是指定元素的宽度和高度的计算方式 以确定元素的总尺寸 具体来说 box sizing 可以有两个可能的取值 1 content box 默认值
  • Object.defineProperty

    Object defineProperty Object defineProperty obj prop descriptor obj 要在其上定义属性的对象 prop 要定义或修改的属性的名称 descriptor 将被定义或修改的属性描
  • 前端常用js插件

    浏览目录 包管理器 加载器 打包工具 测试框架 框架 断言 覆盖率 运行器 QA 工具 MVC 框架和库 基于 Node 的 CMS 框架 模板引擎 Flux 数据可视化 时间轴 编辑器 文件 函数式编程 响应式编程 数据结构 日期 字符串
  • ES6 Promise详解

    优质资源分享 学习路线指引 点击解锁 知识定位 人群定位 Python实战微信订餐小程序 进阶级 本课程是python flask 微信小程序的完美结合 从项目搭建到腾讯云部署上线 打造一个全栈订餐系统 Python量化交易实战 入门级 手
  • 多维数组变成一维数组

    这个问题来源于一个朋友曾经问过我的问题 当时是一个二维数组变成一维数组 后面我想整理一下 整理一个多维 并且是不定维的数组 一 二维数组变成一维数组 1 遍历数组 将元素一个个放入新数组 结果 如果元素不是数组 将会报错 下面是改良版 这样
  • js生成随机颜色

    十六进制颜色 方法1 const randomHex gt Math floor Math random 0xffffff toString 16 padEnd 6 0 console log randomHex 十六进制颜色 方法2 co
  • ES6 面试题 | 14.精选 ES6 面试题

    前端开发工程师 主业 技术博主 副业 已过CET6 阿珊和她的猫 CSDN个人主页 牛客高级专题作者 在牛客打造高质量专栏 前端面试必备 蓝桥云课签约作者 已在蓝桥云课上架的前后端实战课程 Vue js 和 Egg js 开发企业级健康管理
  • ES6 面试题 | 13.精选 ES6 面试题

    前端开发工程师 主业 技术博主 副业 已过CET6 阿珊和她的猫 CSDN个人主页 牛客高级专题作者 在牛客打造高质量专栏 前端面试必备 蓝桥云课签约作者 已在蓝桥云课上架的前后端实战课程 Vue js 和 Egg js 开发企业级健康管理
  • 【JavaScript】Set方法

    基本用法 ES6 提供了新的数据结构 Set 它类似于数组 但是成员的值都是唯一的 没有重复的值 Set 本身是一个构造函数 用来生成 Set 数据结构 const s new Set 2 3 5 4 5 2 2 forEach x gt

随机推荐

  • 模拟退火算法matlab求函数最大值实例

    模拟退火算法matlab求函数最大值实例 模拟退火算法的思路基本上是 1 粒子按照不同的概率在不同的方向漂移 随机运动 2 向目标点漂移的概率更大 趋向于能量低的点 3 随着时间的推移粒子每次漂移的步长变短 温度降低 这里粒子的速度采用正态
  • 解决GD32F20X支持包安装后打开官方例程无法识别芯片问题

    今天分享一个自己遇到的一个问题 就是在安装了GD32F20x的支持包后 发现打开keil5的工程后 提示缺少芯片的device 于是以为keil5的版本不够 又去官网下了其补丁包 没想到还是不行 后来发现迁移到keil5格式就可以找到相应的
  • 最小二乘法的矩阵推导

    顾名思义 从数学意义推导最小二乘法公式 一 解释 最小二乘法本质是寻找一组x 使Ax与b距离最近 写成二范数的形式为 最合适的x一般出现在函数的极值点 也就是导数为0的点 所以为求导计算方便 我们用二范数的平方作为计算公式 补充知识 设下列
  • nginx + lua 构建网站防护waf(一)

    最近在帮朋友维护一个站点 这个站点是一个Php网站 坑爹的是用IIS做代理 出了无数问题之后忍无可忍终于要我帮他切换到nginx上面 前期被不断的扫描和CC 最后找到了waf这样一个解决方案缓解一下 话不多说直接开始 waf的作用 防止sq
  • 111端口rpcbind漏洞

    rpcbind是NFS中用来进行消息通知的服务 实验环境 攻击机 kali linux ip 192 168 172 134 目标机 Metasploittable2 ip 192 168 172 129 攻击过程 setp1 使用nmap
  • k宝无法连接计算机,农行K宝无法识别

    2013 10 21 k宝怎么插入电脑后点击没反应是怎么回事 原因分析 静电 主板电压和系统设置等原因导致 简易步骤 1 拔出所有USB设备 关机 拔掉电源 笔记本需拔出电池 按开机键5 6下 开机重新插入USB设备 2 右键点击 我的电脑
  • 拓展:EPSILON = 1e-8

    EPSILON 是一个希腊字母 叫做艾普西隆 它代表一个常量 通常用于表示一个很小的浮点数值 其值为 1e 8 在计算机中 由于浮点数的精度限制 当两个浮点数非常接近时 它们可能由于舍入误差而不相等 为了解决这种问题 常常会使用一个很小的数
  • 图论 笔记

    关于存图 如果是有权值的边 可以用pair define pii pair
  • springboot集成es 使用x-pack

    引入架包
  • 软件测试工程师笔试题及答案(二)

    测试人员考试试卷二 考试时间90分钟 满分100分 一 判断题 每题2分 正确的 错误的 1 好的测试员不懈追求完美 2 测试程序仅仅按预期方式运行就行了 3 不存在质量很高但可靠性很差的产品 4 软件测试员可以对产品说明书进行白盒测试 5
  • 代码随想录算法训练营19期第36天

    435 无重叠区间 代码随想录 初步思路 重叠区间 贪心 总结 按照右边界排序 从左向右记录非交叉区间的个数 最后用区间总数减去非交叉区间的个数就是需要移除的区间个数 如果按照左边界排序直接求 重叠的区间 使用变量count为记录重叠区间数
  • 单一职责原则

    单一职责原则 就一个类而言 应该只有一个引起它变化的原因 如果一个类承担的职责过多就等于把这些职责耦合在一起 至少会造成以下两方面的问题 我们要去修改该类中的一个职责可能会影响到该类的其它职责 这种耦合会导致脆弱的设计 当变化发生时 设计会
  • 一个月能做什么?成长&感悟分享

    一个月做了什么 八月做了些什么 单词打卡 第一件事情就是单词打卡 英语很差的我 一样继续打卡 今天是第736天 当你还在纠结扇贝和不背 可可英语哪一个好的时候 别人已经同时使用了 当你还在咨询学编程 敲代码需不需要英语的时候 别人已经开始同
  • springboot整合log4j打印日志

    1 排除springboot自带log依赖
  • Hamcrest 测试匹配框架

    为什么要用Hamcrest匹配器框架 Hamcrest是一款软件测试框架 可以通过现有的匹配器类检查代码中的条件 也可以通过自定义的匹配器实现 要在JUnit中使用Hamcrest匹配器 可以用它的assertThat语句 并且可添加一个或
  • pycharm打开chrome自动退出解决方法

    先查谷歌版本和驱动版本 from selenium import webdriver driver webdriver Chrome str1 driver capabilities browserVersion 查看chrome版本 st
  • ARP欺骗

    目录 一 ARP协议 二 ARP欺骗的原理 三 实验环境 四 实验步骤 一 ARP协议 每一个主机都有一个ARP高速缓存 此缓存中记录了最近一段时间内其它IP地址与其MAC地址的对应关系 如果本机想与某台主机通信 则首先在ARP高速缓存中查
  • ns2无线局域网隐藏节点仿真实验

    ns2无线局域网隐藏节点仿真实验 实验内容 实验原理 实验过程 相关模块安装 仿真模块 问题总结 问题一 问题二 问题三 实验内容 无线网络与移动技术第二次实验 用ns2完成无线局域网隐藏节点仿真实验 实验原理 隐藏节点指在接收节点的覆盖范
  • python中 random.randint 和 random.randrange 的区别

    python中 random randint 和 random randrange 的区别 在python中 通过导入random库 就能使用randint 和 randrange 这两个方法来产生随机整数 那这两个方法的区别在于什么地方呢
  • babel转译: es6转es5

    1 ECMAScipt和JavaScript的关系 96年javascript之父netscape 交给国际标准组织ECMA管理 ECMAScipt是javascript的一种规范 javascript是ECMAJavascript的一种实