ES6 簡介

時間 2019-11-19

原文原文鏈接

一、全稱: ECMA 標準，又稱ES2015html

JavaScript 是你們所瞭解的語言名稱，可是這個語言名稱是商標（ Oracle 公司註冊的商標）。所以，JavaScript 的正式名稱是 ECMAScript 。1996年11月，JavaScript 的創造者網景公司將 JS 提交給國際化標準組織 ECMA（European computer manufactures association，歐洲計算機制造聯合會），但願這種語言可以成爲國際標準，隨後 ECMA 發佈了規定瀏覽器腳本語言的標準，即 ECMAScript。這也有利於這門語言的開放和中立。node

ES6，全稱 ECMAScript 6.0 ，是 JavaScript 的下一個版本標準，2015.06 發版。webpack

ES6 主要是爲了解決 ES5 的先天不足，好比 JavaScript 裏並無類的概念，可是目前瀏覽器的 JavaScript 是 ES5 版本，大多數高版本的瀏覽器也支持 ES6，不過只實現了 ES6 的部分特性和功能。git

二、2015年6月 ES6.0，後面每一年6月份，發佈一個版本es6

　　2016年6月 ES6.1 ES7 ES2016github

　　2017年6月 ES6.2 ES8 ES2017web

三、ESnext ：下一代js語言npm

四、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'}) ] };