ES6的概念以及執行環境~滿滿的乾貨

weixin_46370867發表於2020-12-20

下面是對ES6的概念以及配置執行環境的詳細介紹，有需要的小夥伴快來看看吧~

文章目錄

ECMAScript與JavaScript的關係

1996年11月，JavaScript的創造者Netscape 公司，決定將JavaScript 提交給標準化組織ECMA，希望這種語言能夠成為國際標準。次年，ECMA 釋出262號標準檔案(ECMA-262)的第一版，規定了劉覽器指令碼語言的標準，並將這種語言稱為ECMAScript，這個版本就是10版。該標準之所以不叫JavaScript有兩個原因，一是 JavaScript 被Netscape公司註冊為商標，二是想體現該標準的制定者是ECMA不是Netscape。
因此，ECMAScript和JavaScript 的關係是，前者是後者的規格，後者是前者的一種實現（另外的ECMAScript方言還有Jscript和ActionScript )。

ECMAScript與ES2015的關係

2011年，ECMAScript 5.1版釋出後，就開始制定6.0版本。ECMAScript 6就是指該標準的下一個版本。
標準的制定者想讓標準的升級成為常規流程:標準的版本升級成為了一個不斷滾動的流程，每個月都會有變動。標準委員會最終決定，標準在每年的6月份正式釋出一次，作為當年的正式版本。ECMAScript 6 的第一個版本，就這樣在2015年6月釋出了，正式名稱就是《ECMAScript2015標準》(簡稱ES2015)。根據計劃，2017年6月釋出ES2017標準。
因此，ES6 既是一個歷史名詞，也是一個泛指，含義是5.1版以後的JavaScript 的下一代標準，涵蓋了ES2015、ES2016、ES2017等等，而ES2015則是正式名稱，特指該年釋出的正式版本的語言標準。

ECMA的發展歷史

ES6從開始制定到最後釋出，整整用了15年。

  • ECMAScript 1.0是1997年釋出的。
  • ECMAScript 2.0釋出於1998年6月。
  • ECMAScript 3.0則釋出於1999年12月。
  • 2000年 ECMAScript 4.O開始醞釀（沒有通過)，但大部分內容被ES6繼承。
  • 2009年12月ECMAScript 5.0版正式釋出。
  • 2011年6月ECMAscript 5.1版釋出，並且成為ISO國際標準。
  • 2015年6月，ECMAScript 6正式通過，成為國際標準。

WebStorm配置

在這裡插入圖片描述

在編輯器是ES6的，但是瀏覽器不支援ES6，解決方法：執行的之前轉為ES5執行

Babel編譯器

所有的指令碼語言都沒有編譯過程
在這裡插入圖片描述

Babel編譯器就是將編寫的ES6版本的程式碼轉為瀏覽器支援的版本再執行。

Babel 是一個工具鏈，主要用於在舊的瀏覽器或環境中將ECMAScript 2015+程式碼轉換為向後相容版本的JavaScript 程式碼。以下是 Babel可以為你做的主要事情:

  • 轉換語法

  • Polyfill實現目標環境中缺少的功能

  • 原始碼轉換

    //Babel lnput:ES2015 arrow function
[1,2,3].map((n) =>n + 1);
// Babel Output: ES5 equivalent[1,2,3].map(function(n){
return n+ 1;
});

    Babel編譯器連結：https://www.babeljs.cn

安裝Babel

使用以下命令安裝Babel packages:

  • 在指定資料夾裡開啟cmd，Babel就會只安裝在該目錄裡
npm install --save-dev @babel/core @babel/cli @babel/preset- env
npm install --save @babel/polyfill
  • 全域性安裝：
npm install --g @babel/core @babel/cli @babel/preset- env
npm install --save @babel/polyfill

由於npm命令是從外網下載並安裝，可能會導致安裝過程過長或安裝失敗等問題。可以使用cnpm命令進行替換

cnpm install -g @babel/core @babel/cli @babel/preset-env
cnpm install -g @babel/polyfill

cnpm命令是由淘寶NPM映象提供的，這是一個完整的 apmjs.org映象。使用之前需要先安裝
cnpm:

npm install -g cnpm -registry=https://registry.npm.taobao.org

步驟：

在專案的資料夾目錄中輸入cmd，開啟黑視窗：
在這裡插入圖片描述

配置Babel

在工程專案的根目錄下建立package,json配置檔案，該配置檔案內容如下:

{
    "presets": [
    "latest"
    ],
    "plugins": [],
    "devDependencies": {
    "babel-cli": "^6.0.0",
    "babel-preset-latest": "^6.24.1"
    },
    "scripts":{
    "build": "babel src -d lib"
    }
}

在這裡插入圖片描述

在工程專案里根目錄下新建2個資料夾，src資料夾和lib資料夾

在工程專案的根目錄下新建一個JSON檔案，把上面的程式碼複製過去

在這裡插入圖片描述

babel-cli轉碼

根據packagejson配置檔案在工程的根目錄下建立src和lib兩個目錄:

  • src目錄:用於放置ECMAScript 6的程式碼檔案。
  • lib目錄:用於放置通過Babel轉碼後的程式碼檔案。

在src目錄下編寫ECMAScript 6的程式碼檔案後，在命令列提示符中通過如下指令進行轉碼:

npm run build

步驟：

  1. 在src資料夾裡新建一個測試檔案index.js
  2. 在該工程專案的總資料夾中輸入cmd
  3. 在上一步開啟的黑視窗中輸入：npm run build 後回車
  4. 如果第3步成功了，在lib資料夾中會有一個與src中的測試檔名相同的檔案，src中的檔案就是轉換之後的檔案

在真正的開發中，只把lib傳送到伺服器就可以了

好啦，本篇到這裡就結束了，希望可以幫助到有需要的小夥伴~
在這裡插入圖片描述

相關文章