ES6 简介

2022-11-07 07:38:36

1、全称: 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 的部分特性和功能。

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

　　2016年6月 ES6.1 ES7 ES2016

　　2017年6月 ES6.2 ES8 ES2017

3、ESnext ：下一代js语言

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

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

https://github.com/tc39

5、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中就可以看出来

6、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 的文件，至此一整个过程就构建完成。

码农公寓