前端学习第三十一课(ES6简介和babel的使用)
目录
1.ECMAScript简介
1.1 ES6 与 ECMAScript 2015 的关系
2.Babel转码器
2.1 安装babel
2.2 配置文件.babelrc
2.3 命令行转码
2.4 babel-node
2.5 @babel/register 模块
2.6 polyfill
2.7 浏览器环境
1.ECMAScript简介
ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。
1996 年 11 月,JavaScript 的创造者 Netscape 公司,决定将 JavaScript 提交给标准化组织 ECMA,希望这种语言能够成为国际标准。次年,ECMA 发布 262 号标准文件(ECMA-262)的第一版,规定了浏览器脚本语言的标准,并将这种语言称为 ECMAScript,这个版本就是 1.0 版。
该标准从一开始就是针对 JavaScript 语言制定的,但是之所以不叫 JavaScript,有两个原因。一是商标,Java 是 Sun 公司的商标,根据授权协议,只有 Netscape 公司可以合法地使用 JavaScript 这个名字,且 JavaScript 本身也已经被 Netscape 公司注册为商标。二是想体现这门语言的制定者是 ECMA,不是 Netscape,这样有利于保证这门语言的开放性和中立性。
因此,ECMAScript 和 JavaScript 的关系是,前者是后者的规格,后者是前者的一种实现(另外的 ECMAScript 方言还有 JScript 和 ActionScript)。日常场合,这两个词是可以互换的。
1.1 ES6 与 ECMAScript 2015 的关系
ECMAScript 2015(简称 ES2015)这个词,也是经常可以看到的。它与 ES6 是什么关系呢?
2011 年,ECMAScript 5.1 版发布后,就开始制定 6.0 版了。因此,ES6 这个词的原意,就是指 JavaScript 语言的下一个版本。
但是,因为这个版本引入的语法功能太多,而且制定过程当中,还有很多组织和个人不断提交新功能。事情很快就变得清楚了,不可能在一个版本里面包括所有将要引入的功能。常规的做法是先发布 6.0 版,过一段时间再发 6.1 版,然后是 6.2 版、6.3 版等等。
但是,标准的制定者不想这样做。他们想让标准的升级成为常规流程:任何人在任何时候,都可以向标准委员会提交新语法的提案,然后标准委员会每个月开一次会,评估这些提案是否可以接受,需要哪些改进。如果经过多次会议以后,一个提案足够成熟了,就可以正式进入标准了。这就是说,标准的版本升级成为了一个不断滚动的流程,每个月都会有变动。
标准委员会最终决定,标准在每年的 6 月份正式发布一次,作为当年的正式版本。接下来的时间,就在这个版本的基础上做改动,直到下一年的 6 月份,草案就自然变成了新一年的版本。这样一来,就不需要以前的版本号了,只要用年份标记就可以了。
ES6 的第一个版本,就这样在 2015 年 6 月发布了,正式名称就是《ECMAScript 2015 标准》(简称 ES2015)。2016 年 6 月,小幅修订的《ECMAScript 2016 标准》(简称 ES2016)如期发布,这个版本可以看作是 ES6.1 版,因为两者的差异非常小(只新增了数组实例的includes
方法和指数运算符),基本上是同一个标准。根据计划,2017 年 6 月发布 ES2017 标准。
因此,ES6 既是一个历史名词,也是一个泛指,含义是 5.1 版以后的 JavaScript 的下一代标准,涵盖了 ES2015、ES2016、ES2017 等等,而 ES2015 则是正式名称,特指该年发布的正式版本的语言标准。本书中提到 ES6 的地方,一般是指 ES2015 标准,但有时也是泛指“下一代 JavaScript 语言”。
2.Babel转码器
Babel 是一个广泛使用的 ES6 转码器,可以将 ES6 代码转为 ES5 代码,从而在老版本的浏览器执行。这意味着,你可以用 ES6 的方式编写程序,又不用担心现有环境是否支持。下面是一个例子。
// 转码前
input.map(item => item + 1);//箭头函数// 转码后
input.map(function (item) {return item + 1;
});
上面的原始代码用了箭头函数,Babel 将其转为普通函数,就能在不支持箭头函数的 JavaScript 环境执行了。
2.1 安装babel
下面的命令在项目目录中,安装 Babel。
$ npm install --save-dev @babel/core
2.2 配置文件.babelrc
Babel 的配置文件是.babelrc
,存放在项目的根目录下。使用 Babel 的第一步,就是配置这个文件。该文件用来设置转码规则和插件,基本格式如下。
{"presets": [],"plugins": []
}
presets
字段设定转码规则,官方提供以下的规则集,你可以根据需要安装。
# 最新转码规则
$ npm install --save-dev @babel/preset-env# react 转码规则
$ npm install --save-dev @babel/preset-react
然后,将这些规则加入.babelrc
。
{"presets": ["@babel/env","@babel/preset-react"],"plugins": []}
注意,以下所有 Babel 工具和模块的使用,都必须先写好.babelrc
。
2.3 命令行转码
Babel 提供命令行工具@babel/cli
,用于命令行转码。它的安装命令如下。
$ npm install --save-dev @babel/cli
基本用法如下。
# 转码结果输出到标准输出
$ npx babel example.js# 转码结果写入一个文件
# --out-file 或 -o 参数指定输出文件
$ npx babel example.js --out-file compiled.js
# 或者
$ npx babel example.js -o compiled.js# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
$ npx babel src --out-dir lib
# 或者
$ npx babel src -d lib# -s 参数生成source map文件
$ npx babel src -d lib -s
2.4 babel-node
@babel/node
模块的babel-node
命令,提供一个支持 ES6 的 REPL 环境。它支持 Node 的 REPL 环境的所有功能,而且可以直接运行 ES6 代码。
首先,安装这个模块。
$ npm install --save-dev @babel/node
然后,执行babel-node
就进入 REPL 环境。
$ npx babel-node
> (x => x * 2)(1)
2
babel-node
命令可以直接运行 ES6 脚本。将上面的代码放入脚本文件es6.js
,然后直接运行。
# es6.js 的代码
# console.log((x => x * 2)(1));
$ npx babel-node es6.js
2
2.5 @babel/register 模块
@babel/register
模块改写require
命令,为它加上一个钩子。此后,每当使用require
加载.js
、.jsx
、.es
和.es6
后缀名的文件,就会先用 Babel 进行转码。
$ npm install --save-dev @babel/register
使用时,必须首先加载@babel/register
。
// index.js
require('@babel/register');
require('./es6.js');
然后,就不需要手动对index.js
转码了。
$ node index.js
2
需要注意的是,@babel/register
只会对require
命令加载的文件转码,而不会对当前文件转码。另外,由于它是实时转码,所以只适合在开发环境使用。
2.6 polyfill
Babel 默认只转换新的 JavaScript 句法(syntax),而不转换新的 API,比如Iterator
、Generator
、Set
、Map
、Proxy
、Reflect
、Symbol
、Promise
等全局对象,以及一些定义在全局对象上的方法(比如Object.assign
)都不会转码
举例来说,ES6 在Array
对象上新增了Array.from
方法。Babel 就不会转码这个方法。如果想让这个方法运行,可以使用core-js
和regenerator-runtime
(后者提供generator函数的转码),为当前环境提供一个垫片。
安装命令如下。
$ npm install --save-dev core-js regenerator-runtime
然后,在脚本头部,加入如下两行代码。
import 'core-js';
import 'regenerator-runtime/runtime';
// 或者
require('core-js');
require('regenerator-runtime/runtime');
Babel 默认不转码的 API 非常多,详细清单可以查看babel-plugin-transform-runtime
模块的definitions.js文件。
2.7 浏览器环境
Babel 也可以用于浏览器环境,使用@babel/standalone模块提供的浏览器版本,将其插入网页。
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
// Your ES6 code
</script>
注意,网页实时将 ES6 代码转为 ES5,对性能会有影响。生产环境需要加载已经转码完成的脚本。
Babel 提供一个REPL 在线编译器,可以在线将 ES6 代码转为 ES5 代码。转换后的代码,可以直接作为 ES5 代码插入网页运行。
前端学习第三十一课(ES6简介和babel的使用)相关推荐
- 【麦可网】Cocos2d-X跨平台游戏开发学习笔记---第二十一课:Cocos2D-X网格特效1-3
[麦可网]Cocos2d-X跨平台游戏开发---学习笔记 第二十一课:Cocos2D-X网格特效1-3 ================================================ ...
- JavaScript学习(三十一)—在输入框中如何判断输入的是一个正确的网址
JavaScript学习(三十一)-在输入框中如何判断输入的是一个正确的网址 function isUrl(url) {const a = document.createElement("a ...
- 【更好用的单片机】Stduino学习(三十一)红外接收模块
37种传感器(三十一)红外接收模块+Stduino Nano&UNO 本文转载自:http://www.stduino.com/forum.php?mod=viewthread&tid ...
- 2018/09/27Web前端学习第三课
目录 (一). 学习内容 (二). 课程重点 (三). 课程知识点 (四). 作业完成情况 1. 使用 Table 标签和 From 表单元素完成一个个人简历的网页编写 代码展示 成果展示 2. 使用 ...
- Web前端学习-第三课JavaScript篇
Q5:解释什么是引用类型?在使用引用类型的时候需要注意什么? 引用类型通常叫做类,也就是说,遇到引用值时,所处理的就是对象,就是公用. 类型: object类型,应用于应用程序中存储和数据传输(创建 ...
- 前端学习第三课、JavaScript基础
JavaScript 一.JavaScript 和 html 代码的结合方式 内部方式 外部方式 二.控制台的输入输出 三.JS变量和数据类型 定义变量格式: JavaScript 的数据类型: 数值 ...
- 前端学习第三天——CSS
目录 1.CSS简介 1.html的局限性 1.2CSS-网页的美容师 1.3CSS语法规范 1.4CSS代码风格 2.CSS基础选择器 2.1CSS选择器的作用 2.2选择器分类 2.3标签选择器 ...
- 【STC单片机学习】第十一课:蜂鸣器
[朱老师课程总结 侵删] 第一部分.章节目录 1.11.1.蜂鸣器的原理 1.11.2.让蜂鸣器响起来 1.1 ...
- 前端架构设计第十一课 自动化构建部署和工具
23 npm cript:打造一体化的构建和部署流程 之前我们提到过,一个顺畅的基建流程离不开 npm scripts.npm scripts 将工程化的各个环节串联起来,相信任何一个现代化的项目都有 ...
最新文章
- android第一次启动超级慢
- 梦断代码阅读笔记02
- 10-python-字典
- 白话经典算法系列之中的一个 冒泡排序的三种实现
- Mysql合并两个sql结果
- 安阳7中计算机绘画知识,安阳工学院绘画专业主修课程有哪些
- 19. 配置Symfony(和环境)
- C语言做出3D效果的程序,3D数学库的简单实现(C语言)
- “kuangbin带你飞”专题计划——专题一:简单搜索
- 495. Teemo Attacking。
- RFB_Net(ECCV 2018)
- 全国多省市推广盘扣脚手架,模架大咖怎么看?
- 全网最新 java 开发 OPC 实现 DA 通讯控制点位 西门子
- Weston 纹理倒置(render-gl)
- STG74S-E1G000-1-A-AHS霍尼韦尔压力变送器
- 【百度实习录】新人练习
- 任正非:我们国家还是要强调发展实体经济 发挥工匠精神
- (转载)阿里云服务器--学生优惠版购买以及配置方法(Windows操作系统)
- McAfee参与战略合作,i-house.com用区块链整合全球不动产交易市场
- ulr实现web资源下载