為什麼要將es6轉為es5

原因：為了瀏覽器相容，以及為了在node.js環境可以順暢地運行應用程式。 ES6作為JS的新規範，加入了許多新的語法和API，但現代瀏覽器對ES6新特性支援不高，所以需將ES6程式碼轉換為ES5程式碼；只要在專案中安裝並設定Babel工具即可。

本教學操作環境：windows7系統、ECMAScript 6版、Dell G3電腦。

為什麼要將es6轉為es5？

簡單答案就是：為了瀏覽器相容，以及為了在 node.js 環境可以順暢運行應用程式。

ES6作為JS的新規範，加入了許多新的語法和API，而市面上的瀏覽器並沒有全部相容，所以需要將ES6語法程式碼轉換為ES5的程式碼。

現代瀏覽器對ES6新特性支援度不高，所以要想在瀏覽器中直接使用ES6的新特性就得借助別的工具來實現。

在node.js 環境中，node 對ES6 的支援一直被詬病，到了13 版本之後，才出了模組模式（在package.json 中增加一句：「type」: “module”），但有些函式庫仍然不支援ES6 語法。因此，如果你的 node.js 程式遇到不認識 ES6 語法的時候，請使用 Babel 轉碼也許就能解決問題。

怎麼把es6轉為es5？

用babel將es6轉換成es5。

下面我們寫出在命令列使用 Babel 的過程，讓你清楚轉譯過程的全部。

1. 在專案中安裝Babel 的命令列工具

npm install -D babel-cli

2. 準備ES6 程式碼

通常我們會把原始碼放在src 目錄下，如果你沒有現成的ES6 程式碼，那就在src 目錄下建立一個：

// src/example.js
class Hello {
  static world() {
    console.log('Hello, World!');
  }
}
Hello.world();

3. 設定Babel

Babel 是透過插件和預設值（preset）來轉譯程式碼（因此它可以轉譯的不只是ES6）。為了轉譯ES6 為ES5，我們只需要配置env 預設值就可以了，安裝這個插件：

npm install -D babel-preset-env

我們還需要一個設定文件，在專案根目錄下建立檔案：.babelrc，內容如下：

// .babelrc
{
  "presets": ["env"]
}

4. 建立npm 指令

這一步不是必須的，因為前面已經設定好了，你可以直接執行指令：

babel src -d build

這樣就會把src 目錄下的Javascript 程式碼轉譯成ES5，並存放在build 目錄下。

習慣上，我們將上門的指令放到 npm 指令中。在專案的package.json 中，輸入下面的內容：

"scripts": {
  "build": "babel src -d build",
},

這樣你就可以使用下面的命令來轉譯ES6 程式碼：

npm run build

【相關推薦：javascript影片教學、web前端】

#

以上是為什麼要將es6轉為es5的詳細內容。更多資訊請關注PHP中文網其他相關文章！