ES6 教程

ES6 教程

1. 1 ES6 教程

简介

ES6, 全称 ECMAScript 6. 0 ,是 JavaScript 的下一个版本标准,2015. 06 发版。

ES6 主要是为了解决 ES5 的先天不足,比如 JavaScript 里并没有类的概念,但是目前浏览器的 JavaScript 是 ES5 版本,大多数高版本的浏览器也支持 ES6,不过只实现了 ES6 的部分特性和功能。

ECMAScript 的背景

JavaScript 是大家所了解的语言名称,但是这个语言名称是商标( Oracle 公司注册的商标)。因此,JavaScript 的正式名称是 ECMAScript 。1996年11月,JavaScript 的创造者网景公司将 JS 提交给国际化标准组织 ECMA(European computer manufactures association,欧洲计算机制造联合会),希望这种语言能够成为国际标准,随后 ECMA 发布了规定浏览器脚本语言的标准,即 ECMAScript。这也有利于这门语言的开放和中立。

ECMAScript 的历史

ES6 是 ECMAScript 标准十余年来变动最大的一个版本,为其添加了许多新的语法特性。

  • 1997 年 ECMAScript 1. 0 诞生。
  • 1998 年 6 月 ECMAScript 2. 0 诞生,包含一些小的更改,用于同步独立的 ISO 国际标准。
  • 1999 年 12 月 ECMAScript 3. 0诞生,它是一个巨大的成功,在业界得到了广泛的支持,它奠定了 JS 的基本语法,被其后版本完全继承。直到今天,我们一开始学习 JS ,其实就是在学 3. 0 版的语法。
  • 2000 年的 ECMAScript 4. 0 是当下 ES6 的前身,但由于这个版本太过激烈,对 ES 3 做了彻底升级,所以暂时被”和谐”了。
  • 2009 年 12 月,ECMAScript 5. 0 版正式发布。ECMA 专家组预计 ECMAScript 的第五个版本会在 2013 年中期到 2018 年作为主流的开发标准。2011年6月,ES 5. 1 版发布,并且成为 ISO 国际标准。
  • 2013 年,ES6 草案冻结,不再添加新的功能,新的功能将被放到 ES7 中;2015年6月, ES6 正式通过,成为国际标准。

ES6 的目标与愿景

成为更好编写的开发语言有以下目标。

适应更复杂的应用;实现代码库之间的共享;不断迭代维护新版本。

map. png

1. 2 ES6 环境搭建

目前各大浏览器基本上都支持 ES6 的新特性,其中 Chrome 和 Firefox 浏览器对 ES6 新特性最友好,IE7~11 基本不支持 ES6。

以下是各大浏览器支持情况及开始时间:

Chrome 58 Edge 14 Firefox 54 Safari 10 Opera 55
2017 年 1 月 2016 年 8 月 2017 年 3 月 2016 年 7 月 2018 年 8 月

实例

1
2
3
4
5
6
7
var a = 2;
{
let a = 3;
document.write(a); // 3
}
document.write('<br>');
document.write(a); // 2

浏览器支持的详细的内容可以参考:http://kangax.github.io/compat-table/es6/

Node.js 是运行在服务端的 JavaScript,它对 ES6 的支持度更高。如果你还不了解 Node.js 可以阅读我们的 Node.js 教程。

Node.js 安装可以参考 Node.js 安装配置。

在 Node.js 环境中运行 ES6

1
2
3
4
5
6
7
$ node
> let sitename="node"
undefined
> console.log(sitename)
node
undefined
>

使用下面的命令,可以查看 Node 已经实现的 ES6 特性。

1
node --v8-options | grep harmony

webpack

webpack 是一个现代 JavaScript 应用程序的静态模块打包器 (module bundler) 。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图 (dependency graph) ,其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle 。

webpack 主要有四个核心概念:

  • 入口 (entry)
  • 输出 (output)
  • loader
  • 插件 (plugins)

入口 (entry)

入口会指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的。在 webpack 中入口有多种方式来定义,如下面例子:

单个入口(简写)语法:

1
2
3
const config = {
entry: "./src/main.js"
}

对象语法:

1
2
3
4
const config = {
app: "./src/main.js",
vendors: "./src/vendors.js"
}

输出 (output):

output 属性会告诉 webpack 在哪里输出它创建的 bundles ,以及如何命名这些文件,默认值为 ./dist:

1
2
3
4
5
6
7
const config = {
entry: "./src/main.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, 'dist')
}
}

loader

loader 让 webpack 可以去处理那些非 JavaScript 文件( webpack 自身只理解 JavaScript )。loader 可以将所有类型的文件转换为 webpack 能够有效处理的模块,例如,开发的时候使用 ES6 ,通过 loader 将 ES6 的语法转为 ES5 ,如下配置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const config = {
entry: "./src/main.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
options: [
presets: ["env"]
]
}
]
}
}

插件 (plugins)

loader 被用于转换某些类型的模块,而插件则可以做更多的事情。包括打包优化、压缩、定义环境变量等等。插件的功能强大,是 webpack 扩展非常重要的利器,可以用来处理各种各样的任务。使用一个插件也非常容易,只需要 require() ,然后添加到 plugins 数组中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 通过 npm 安装
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 用于访问内置插件
const webpack = require('webpack');

const config = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
}
]
},
plugins: [
new HtmlWebpackPlugin({template: './src/index.html'})
]
};

利用 webpack 搭建应用

webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
const path = require('path');

module.exports = {
mode: "development", // "production" | "development"
// 选择 development 为开发模式, production 为生产模式
entry: "./src/main.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
options: [
presets: ["env"]
]
}
]
},
plugins: [
...
]
}

上述例子构建了一个最简单的配置,webpack 会从入口 main.js 文件进行构建,通过 loader 进行js转换,输出一个为 bundle.js 的文件,至此一整个过程就构建完成。

gulp

gulp 是一个基于流的自动化构建工具,具有易于使用、构建快速、插件高质和易于学习的特点,常用于轻量级的工程中。

如何使用?

全局安装 gulp:

1
npm install --global gulp

在项目中引入依赖:

1
npm install --save-dev gulp

在项目根目录下创建名为 gulpfile.js 的文件:

1
2
3
4
5
6
const gulp = require('gulp');

// default 表示一个任务名,为默认执行任务
gulp.task('default', function() {
// 放置默认的任务代码
})

运行 gulp:

1
gulp

利用 gulp 搭建应用

1
2
3
4
5
6
7
8
const gulp = require('gulp');
const uglify = require("gulp-uglify");

gulp.task('default', function() {
gulp.src('./src/main.js')
.pipe(uglify())
.pipe(gulp.dest('./dist'));
})

参考文章