ECMAScript 6 开篇准备

1前言

该系列文章均为学习阮一峰老师《ECMAScript 6 入门》一书的学习笔记。原著:http://es6.ruanyifeng.com/

各大浏览器的最新版本,对ES6的支持可以查看kangax.github.io/es5-compat-table/es6/。随着时间的推移,支持度已经越来越高了,ES6的大部分特性都实现了。

Node.js是JavaScript语言的服务器运行环境,对ES6的支持度比浏览器更高。通过Node,可以体验更多ES6的特性。建议使用版本管理工具nvm,来安装Node,因为可以自由切换版本。不过, nvm不支持Windows系统,如果你使用Windows系统,下面的操作可以改用nvmwnvm-windows代替。

2安装Babel

由于目前很多浏览器对ECMAScript 6的支持度有限,但是又想使用ECMAScript 6提供的高级语法,因此babel诞生了,它能将ECMAScript 6的特殊语法转换为ECMAScript 5中对应的解决方案,所以我们不用等到浏览器的支持就可以在项目中使用ES6的特性。。

babel6之后,将babel拆分成两个包:babel-cli和babel-core。如果你想要在CLI(终端或REPL)使用babel就下载babel-cli,如果想要在node中使用就下载babel-core。

一般情况下,我们不会将babel安装在全局,因为不同的项目可能使用不同的babel,并且安装在全局,那么我们的项目就对环境产生了依赖,因此,通常我们将babel-cli安装在项目中。

2.1. 创建一个学习项目

js_ES5用来存放转换后的ECMAScript 5文件,js_ES6用来存放ECMAScript 6文件文件。

要想在这个项目中使用npm命令安装babel等,必须首先建立package.json文件,为此使用

1 npm init

命令在项目中引导创建一个package.json文件。

2.2. 安装babel-cli

npm install --save-dev babel-cli

2.3. 安装 babel-preset-es2015

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

babel-preset-es2015是Babel官方提供的一个转码规则,还有其他的转码规则:

# ES2015转码规则
$ npm install --save-dev babel-preset-es2015

# react转码规则
$ npm install --save-dev babel-preset-react

# ES7不同阶段语法提案的转码规则(共有4个阶段),选装一个
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3

2.4.配置babel

Babel的配置文件是.babelrc,存放在项目的根目录下。使用Babel的第一步,就是配置这个文件。该文件用来设置转码规则和插件,基本格式如下。

{
  "presets": [],
  "plugins": []
}

presets字段设定转码规则。但是在windows系统中,不允许直接右键建立没有文件名的文件,可以通过cmd命令行创建:在当前文件夹打开cmd并键入命令

这样我们就创建了一份babel的配置文件,配置它:

2.5. 修改package.json

build 的值的规范为:

$babel es6.js #转换代码直接输出
$babel es6.js -o es5.js #转换代码输出到文件
$babel -d build-dir source-dir #转换整个目录
$babel -d build-dir source-dir -s #转换整个目录,并生成 source map 映射文件

2.6. 执行转码:

这时在js_ES5的目录下,就有转码后的文件里了

3 安装babel-register

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

npm install --save-dev babel-register

使用时,必须首先加载babel-register

require("babel-register");
require("es6");

然后,就不需要手动对es6.js转码了。

需要注意的是,babel-register只会对require命令加载的文件转码,而不会对当前文件转码。另外,由于它是实时转码,所以只适合在开发环境使用

4安装babel-polyfill

Babel默认只转换新的JavaScript句法(syntax),而不转换新的API,比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象,以及一些定义在全局对象上的方法(比如Object.assign)都不会转码。

举例来说,ES6在Array对象上新增了Array.from方法。Babel就不会转码这个方法。如果想让这个方法运行,必须使用babel-polyfill,为当前环境提供一个垫片。

安装命令如下。

npm install --save babel-polyfill

然后,在脚本头部,加入如下一行代码。

require("babel-polyfill");

Babel默认不转码的API非常多,详细清单可以查看babel-plugin-transform-runtime模块的definitions.js文件。

require ("babel-polyfill");
[1,2,3].map(n => n + 1);
function addAll() {
    return Array.from(arguments).reduce((a, b) => a + b);
}

执行npm run build转码后:

"use strict";

var _from = require("babel-runtime/core-js/array/from");

var _from2 = _interopRequireDefault(_from);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

require("babel-polyfill");
[1, 2, 3].map(function (n) {
    return n + 1;
});
function addAll() {
    return (0, _from2.default)(arguments).reduce(function (a, b) {
        return a + b;
    });
}

5Babel常用命令

1、转换es6.js文件并在当前命名行程序窗口中输出

babel es6.js

2、将es6.js转换后输出到es5.js文件中(使用 -o 或 --out-file )

babel es6.js -o es5.js
babel es6.js --out-file es5.js

3、实时监控es6.js一有变化就重新编译(使用 -w 或 --watch )

babel es6.js -w --out-file es5.js
babel es6.js --watch --out-file es5.js

4、编译整个src文件夹并输出到lib文件夹中(使用 -d 或 --out-dir )

babel src -d lib
babel src --out-dir lib

5、编译整个src文件夹并输出到一个文件中

babel src --out-file es5.js

6、直接输入babel-node命令,可以在命令行中直接运行ES6代码

babel-node
时间: 2024-10-13 16:13:49

ECMAScript 6 开篇准备的相关文章

从零开始的全栈工程师——html篇1.9(js开篇)

JS开篇 一.js介绍 全称 javascript 但不是java 他是一门前台语言 而java是后台语言js作者 布兰登·艾奇 前台语言:运行在客户端的后台语言:跟数据库有关的 能干什么?    页面特效 开发网页游戏 后台开发等等 二.js和ECMAscript的关系 es不是语言 是js的标准 我们学习js得按es的标准学习 三.前端的三个层次 HTML  结构层 CSS  表现层 JS  行为层 四.js写在哪里 因为js和pho都是脚本语言 js写在script这个标签里 php写在<

2016年开篇 - 敏捷与成果经济

Manifesto for Agile Software Development 敏捷软件开发宣言 Individuals and interactions over processes and tools 个体和互动 高于 流程和工具 Working software over comprehensive documentation 工作的软件 高于 详尽的文档 Customer collaboration over contract negotiation 客户合作 高于 合同谈判 Resp

2015黑帽大会开篇:“互联网自由和开放正走向消亡”

2015年黑帽大会于上周三在拉斯维加斯正式拉开帷幕,本次大会新增关注互联网文化中的法律角色极其暗淡前景的话题. 当天开讲人Jennifer Granick,系斯坦福大学社交网络中心公民自由系主任,因其在合法防御黑客方面的建树而知名,以理想主义的口吻开篇. "我一直坚信自由和开放的互联网终将到来.且我一直相信我们需要一个信息可免费获取的世界,"Granick这样说道,"我认为人们可以自由获取tinker--这样的手动命令人们应该能够研究.操控乃至对定义着世界的设备和软件进行反向

Android异步加载全解析之开篇瞎扯淡

Android异步加载 概述 Android异步加载在Android中使用的非常广泛,除了是因为避免在主线程中做网络操作,更是为了避免在显示时由于时间太长而造成ANR,增加显示的流畅性,特别是像ListView.GridView这样的控件,如果getView的时间太长,就会造成非常严重的卡顿,非常影响性能. 本系列将展示在Android中如何进行异步加载操作,并使用ListView来作为演示的对象. 如何下载图像 下载自然是需要使用网络,使用网络就不能在主线程,在主线程就会爆炸.所以我们必须要在

ECMAScript 5 Array Methods

ECMAScript 5 定义了9个新的数组方法,分别为: 1.forEach();  2.map();  3.filter();  4.every();  5.some();  6.reduce();  7.reduceRight();  8.indexOf();  9.lastIndexOf(); 概述:首先,大多数的方法都接受一个函数作为第一个参数,并为数组里的每个元素(或者一些元素)执行这个函数.在稀疏数组中(索引不以0开始,并且元素不连续),不存在的数组元素不调用函数参数.大多数实例中

OPC学习开发记录(C#):OPC客户端【开篇】

OPC客户端 1.前言 思前想后,还是写下来实在一点,一来可以对自己的学习开发结果进行总结,二来可以锻炼自己表达能力,如何能够将意思表达清楚.博客园真的没有认真做做记录,也不会排版,丑的一比.关于OPC开发的,从零慢慢开始学习(谁不是呢),从简单的开始,OPC客户端是怎么使用的问题,站在用户(相对)的角度,也是比较简单的一部分,易从这一部分入手.根据网上的源码,我很快就自己开发了一个将就能用的OPC客户端,主要目的还是掌握OPC的结构和用法,为以后OPC服务器开发做铺垫.本篇为记录开篇,新手上路

前端开发者进阶之ECMAScript新特性--Object.create

前端开发者进阶之ECMAScript新特性[一]--Object.create Object.create(prototype, descriptors) :创建一个具有指定原型且可选择性地包含指定属性的对象 参数:prototype 必需.  要用作原型的对象. 可以为 null.descriptors 可选. 包含一个或多个属性描述符的 JavaScript 对象."数据属性"是可获取且可设置值的属性. 数据属性描述符包含 value 特性,以及 writable.enumerab

ECMAScript基本数据类型

ECMAScript有5种基本数据类型 Undefined.Null.Boolean.Number 和 String. Undefined类型 未声明.声明但未初始化的变量typeof判定数据类型的时候都是 undefined 声明但未初始化的变量可以对其进行undefined值类型可以执行的操作 未声明的变量对其使用非赋值操作都会出错 var JsTest=function(){ var str; console.log(str==undefined);//true console.log(s

webService(一)开篇

Webservice技术在web开发中算是一个比较常见技术.这个对于大多数的web开发者,别管是Java程序员还是.NET程序员应该都不是很陌生.今天我就和大家一起来学习一下webservice的基本内容.此篇文章作为webservice的开篇,首先我们来看一下什么是webservice.他能干什么用呢? 什么是webservice Web Services是由企业发布的完成其特定商务需求的在线应用服务,其他公司或应用软件能够通过Internet来访问并使用这项在线服务. 用简单点的话说,就是系