ES6標準入門第一章：簡介

時間 2019-11-30

標籤 es6 標準入門第一章簡介欄目 JavaScript 简体版

原文原文鏈接

ECMAScript 6 是JavaScript 語言的下一代標準；發佈於2015年，又稱爲ECMAScript 2015。
ECMAScript 方言還有 JScript 和 ActionScript。
ECMAScript 與 JavaScript 的關係：前者是後者的規範，後者是前者的一種實現。
一個完整的JavaScript實現包含 ECMAScript 、DOM、 BOM 三部分。
babel 轉碼器：
- Babel 是一個廣爲使用的ES6轉碼器，能夠將ES6代碼轉爲ES5代碼，從而在瀏覽器或其餘環境執行；
```
//轉碼前
input.map(item => item +1);

//轉碼後
input.map(function (item) {
    return item + 1;
})
```
1. 命令行環境
  Babel 的命令行版本經過下面的命令安裝：
```
$ npm install --global babel-cli
$ npm install --save babel-preset-es2015
// 而後在當前目錄下新建配置文件 .babelrc  並寫入如下代碼
{
    "presets": ['es2015']          
}
```
  Babel 自帶一個babel-node 命令，提供支持ES6 的 REPL 環境。它支持Node.js 的REPL環境的全部功能，並且能夠直接運行ES6代碼：node
```
$ babel-node
console.log([1,2,3].map(x => x * x))   //[1 , 4, 9]
```
  babel-node 命令也能夠直接運行 ES6腳本：（假設將上述代碼寫入es6.js中）es6
```
$ babel-node es6.js     // [1, 4, 9]
```
  babel 命令能夠將 ES6代碼轉換爲 ES5 代碼：npm
```
$ babel es6.js

"use strict";

console.log( [1,2,3].map( function (x) {
    return x * x;
}) )
```
  -o參數（或--out-file）可將轉換後的代碼從標準輸出重定向至文件瀏覽器
```
$ babel es6.js -o es5.js
#或者
$ babel es6.js --out-file es5.js
```
  -d參數用於轉換整個目錄（-d後面跟的是輸出目錄）babel
```
$ babel -d build-dir source-dir
```
  -s參數用於生成source map 文件工具
```
$ babel -d build-dir source-dir -s
```
2. 瀏覽器環境
  babel 也能夠用於瀏覽器。可是Babel6.0開始再也不直接提供瀏覽器版本，而是要用構建工具構建出來；或者經過安裝5.x 版本的babel-core模塊獲取。
```
$ npm install babel-core@5
```
  運行以上命令可在當前目錄的 node_modules/babel-core/ 子目錄下找到babel的瀏覽器版本browser.js(未精簡) 和 browser.min.js(已精簡)
  而後插入如下代碼到網頁中：性能
```
<script src="node-modules/babel-core/browser.js"></script>
<script type="text/babel">
        // 書寫es6 代碼
</script>
```
  注意：這種寫法實時的將es6 轉換爲 es5，對網頁性能有影響。生產環境下須要加載已轉碼的腳本。
3. Node.js 環境
  (1)先安裝babel-core 和 babel-preset-2015
```
$ npm install --save-dev babel-core babel-preset-2015
```
  (2)而後在項目根目錄下新建 .babelrc 文件
```
{
     "presets":["es2015"]      
}
```
  (3)最後在腳本中調用babel-core的 transform 方法
```
var es5Code = 'let x = n => n + 1';
var es6Code = require('babel-core')
                       .transform(es5Code, {presets: ['es2015']})
                       .code;
//' "use strict"; \n\n var x = function x(n) {\n return n+1; \n}; '
```
  方法二：
  Node 腳本還有一種特殊的babel用法，即把babel加載爲require 命令的一個鉤子
  執行完（1）（2）以後，在應用的入口腳本( entry script )頭部加入下面語句:
```
require("babel-core/register");
```
  有了上面這個語句，後面全部經過require命令加載的後綴名爲 .es6 .es .jsx .js 的腳本都會先經過babel轉碼再加載；
4. 在線轉換
  Babel提供了一個REPL在線編譯器，將ES6代碼轉換爲es5代碼後插入到網頁中運行。