ES6 简介

一、全称: ECMA 标准，又称ES2015

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

 

ES6， 全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版。

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

 

二、2015年6月 ES6.0，后面每一年6月份，发布一个版本

　　2016年6月 ES6.1   ES7          ES2016

　　2017年6月 ES6.2   ES8           ES2017

 

三、ESnext  ：下一代js语言

 

四、TC39 委员会正式写入 ES6 规格：请不要省略分号！

许多 JS 开发者喜欢省略行尾的分号，让引擎自动添加。 
如今，TC39 委员会正式写入 ES6 规格：请不要省略分号！一个主要缘由是，即将进入规格的 class field 是以分号结尾，省略会有危险。另外，自动添加分号的机制是靠猜的，但软件运行不该该靠猜。

https://github.com/tc39

 

五、babel

Babel is a JavaScript compiler.

https://www.babeljs.cn/docs/

 

如今的浏览器不少都不支持es6的语法，或者仅仅是部分支持，好比你用.360浏览器，你会发现它支持let却不支持箭头函数等。

babel就承担了“翻译”的角色，把es6的写法转换成es5的写法。 
可是有些人可能在一个项目中单独安装完babel，并成功生成了新的文件后，发现导入这个文件到浏览器中却报错了。其中颇有可能被误导的是 import这个关键词。

实际上babel转换后的代码是遵循commonJS规范的，而这个规范，浏览器并不能识别。所以导入到浏览器中会报错，而nodeJS是commonJS的实现者，因此在babel转换后的代码是能够在node中运行的。

为了将babel生成的commonJS规范的es5写法可以在浏览器上直接运行，咱们就借住了webpack这个打包工具来完成，由于webpack自己也是遵循commonJS这个规范的，从它的配置文件webpack.config.js中就能够看出来

 

 

六、ES6环境搭建

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

B、Node.js 是运行在服务端的 JavaScript，它对 ES6 的支持度更高

在 Node.js 环境中运行 ES6

$ node
> let sitename="runoob" undefined > console.log(sitename) runoob undefined >

使用下面的命令，能够查看 Node 已经实现的 ES6 特性。

node --v8-options | grep harmony


C、webpack

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

webpack 主要有四个核心概念:

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

入口 (entry)

入口会指示 webpack 应该使用哪一个模块，来做为构建其内部依赖图的开始。进入入口七点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。在 webpack 中入口有多种方式来定义，以下面例子：

单个入口（简写）语法:

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

对象语法:

const config = { app: "./src/main.js", vendors: "./src/vendors.js" }

输出 (output):

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

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 ，以下配置：

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 数组中。

// 经过 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

 

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