原因：為了瀏覽器兼容，以及為了在node.js環(huán)境可以順暢運行應用程序。ES6作為JS的新規(guī)范，加入了很多新的語法和API，但現(xiàn)代瀏覽器對ES6新特性支持度不高，所以需將ES6代碼轉(zhuǎn)為ES5代碼；只需在項目中安裝和配置好Babel工具即可。

本教程操作環(huán)境：windows7系統(tǒng)、ECMAScript 6版、Dell G3電腦。

為什么要將es6轉(zhuǎn)為es5？

簡單答案就是：為了瀏覽器兼容，以及為了在 node.js 環(huán)境可以順暢運行應用程序。

ES6作為JS的新規(guī)范，加入了很多新的語法和API，而市面上的瀏覽器并沒有全部兼容，所以需要將ES6語法代碼轉(zhuǎn)為ES5的代碼。

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

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

怎么將es6轉(zhuǎn)為es5？

用babel將es6轉(zhuǎn)換成es5。

下面我們寫出在命令行使用 Babel 的過程，讓你清楚轉(zhuǎn)譯過程的全部內(nèi)容。

1. 在項目中安裝 Babel 的命令行工具

npm?install?-D?babel-cli

2. 準備 ES6 代碼

通常我們把源代碼放在 src 目錄下，如果你沒有現(xiàn)成的 ES6 代碼，那就在 src 目錄下創(chuàng)建一個：

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

3. 配置 Babel

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

npm?install?-D?babel-preset-env

我們還需要一個配置文件，在項目根目錄下創(chuàng)建文件：.babelrc，內(nèi)容如下：

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

4. 創(chuàng)建 npm 命令

這一步不是必須的，因為前面已經(jīng)配置好了，你可以直接執(zhí)行命令：

babel?src?-d?build

這樣就會把 src 目錄下的 Javascript 代碼轉(zhuǎn)譯成 ES5，并存放在 build 目錄下。

習慣上，我們將上門的命令放到 npm 命令中。在項目的 package.json 中，輸入下面的內(nèi)容：

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

這樣你就可以使用下面的命令來轉(zhuǎn)譯 ES6 代碼：

npm?run?build

【相關推薦：javascript視頻教程、web前端】

以上是為什么要將es6轉(zhuǎn)為es5的詳細內(nèi)容。更多信息請關注PHP中文網(wǎng)其他相關文章！