重组es6之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转化器的第一步设置
{"presets":["latest"],"plugins": []}
- 使用命令进行转化
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,控制台输出的依旧和原来的一样
这个时候就要使用垫片了
使用步骤:
- 安装垫片
npm install --save-dev core-js regenerator-runtime
- 在需要转化的文件中加入这两句
require('core-js');
和require('regenerator-runtime');
- 接着使用babel命令转化即可
重组es6之es6转es5的方式相关推荐
- 如何利用babel工具将es6语法转换成es5语法
如何利用babel工具将es6语法转换成es5语法 一.很多同学疑问既然es6已经出来的了,为很莫写完es6语法还要把他转换成es5,这不是脱裤子放屁吗? ECMAScript 6(ES6)的发展速度 ...
- JavaScript继承理解:ES5继承方式+ES6Class继承对比
JavaScript中实现继承 在JavaScript中实现继承主要实现以下两方面的属性和方法的继承,这两方面相互互补,既有共享的属性和方法,又有特有的属性和方法. 实例属性和方法的继承: 目的: ...
- web之ES6,ES6浅层次(上)
ES6 文章目录 ES6 1,什么是ES6? 2,let和const let与var的区别(官宣) 作用域 const(音标['kɒnst],读成看思特) const定义对象和数组 3,解构赋值(不是 ...
- 【ES6】ES6编程规范 编程风格
[ES6]ES6编程规范 编程风格 一.定义变量的规范 二.字符串 三.对象 四.数组 五.函数 查看更多ES6教学文章: 参考文献 引言:这是ES6系列教学的最后一篇.我们讲解一下ES6编程的规范. ...
- (语法糖)ES6类class声明类的方式 -ES5类声明继承
本文将从以下几方面介绍类与继承 类的声明与实例化 如何实现继承 继承的几种方式 类的声明与实例化 类的声明一般有两种方式 // es5和es6声明类的区别,es5没有统一语法规范.es6有统一写法规范 ...
- 【ES6(2015)】新的声明方式 let、const
文章目录 1. 作用域 2. let 3. const 1. 作用域 常见的作用域主要分为几个类型:全局作用域.函数作用域.块状作用域.动态作用域. 对象 类型 global/window 全局作用域 ...
- Bable实现由ES6转译为ES5
Babel是一个广泛使用的转码器,可以将ES6代码转译为ES5代码,从而在现有环境下执行. 举例说明: 转译前(ES6格式)代码如下: let User = { name : '张三', age : ...
- ES6新特性_浏览器中使用ES6模块化的另一种方式--JavaScript_ECMAScript_ES6-ES11新特性工作笔记044
然后我们再来看一下,es6的模块化在,浏览器使用的第二种方式 这里比如我有个aap.js,这个js呢,算是我们一个入口的文件 在这个里面我们可以引入 其他的js模块,比如我这个里面引入了m1.js 然 ...
- 将ES6的语法转为ES5(为了兼容 ES5) (Babel)
掌握 ES6 之后,如果你的业务需要考虑 ES5 的兼容性,则可以这样做:写 ES6 语法的 js 代码,然后通过 Babel将 ES6 转换为 ES5.如果没有这样的需要,那么下面的内容,了解即可. ...
最新文章
- PHP NULL 合并运算符
- linux pmap命令,Linux pmap 命令用法详解-Linux命令大全(手册)
- 关于Metasploit开发环境的搭建
- hdu 4407 Sum
- 历时 4 年,阿里云推出金融核心系统转型实践书
- 开发winform程序,在拖拽控件大小时,VS会卡死
- cgcs2000高斯平面直角坐标_多元微积分——环量、旋度与格林、斯托克斯公式,通量、散度与高斯公式...
- Css学习总结(1)——20个很有用的CSS技巧
- Node开发知识概括
- 2016-2017-2 20155117实验二《Java面向对象程序设计》实验报告
- windows脚本编制引擎_从零开始的场景编辑器(二):脚本系统
- 基于Java的实现宠物管理系统的设计与实现
- android /mnt/sdcard 只读,Android重要的文件目录mnt/sdcard 和 /sdcard
- 结合实战,浅析GB/T28181(七)—— 球机云台控制
- ZJM与生日礼物【字典树】
- 0002数学建模的重要意义
- ACRO2010__系统性综述: 达到缓解的AS患者能否停用TNF拮抗剂
- 【autojs】Auto.js Pro安卓QQ语音红包秒抢挂免费脚本源码
- 兴趣点推荐代码_如何解读霍兰德职业兴趣测评结果
- windows10怎么备份操作系统