[小菜一碟] 讓 IE(Internet Explorer)也能夠跑 ES6、ES7、ES8 的語法

這件事情說穿了其實就是用 Babel,平常就有在關注前端技術發展的朋友應該不陌生,Babel 可以將 JavaScript 比較新的語法轉譯成通用的寫法,讓舊版的瀏覽器(例如:IE)可以執行,我們就不需要為了舊版的瀏覽器而捨棄新語法。

現代的前端開發環境已經發展得很完整,有 CLI 工具、相依性套件管理工具、打包工具、...等,但是這些對於主力在後端的我還是處於一個略懂略懂的階段,平常開發前端程式還是採在頁面上直接引用 Library 進行開發的方式,所以這篇文章就只有介紹如何使用 Babel Standalone 的版本在 IE 進行即時轉譯。

假定我的 JavaScript Code 長這樣:

async function test() {
    var result = await $.get("/Test/Data");

    console.log(result);
}

test();

這段 Code 有使用到 async/await 語法,很顯然的,這是 IE 不支援的,如果直接在 IE 跑起來會在主控台看到錯誤。

引用 babel-polyfill 及 babel-standalone

我們需要兩個 Library:babel-polyfillbabel-standalone,直接引用它。

接下來我們要改兩個 <script> 標籤的屬性,分別是 type="text/babel"data-presets="es2015,es2016,es2017",就像這樣:

然後 IE 就能執行了

Babel REPL

在前端即時轉譯當然不是免費的,JavaScript Code 會延後執行,整個頁面的渲染會拉長,有效能上的考量,應該採預先轉譯,如果不熟悉前端的開發工具的話,Babel REPL 可以協助我們取得轉譯後的程式碼,雖然麻煩了一點,但也是能解決問題。

Babel REPL 是 Babel 開發團隊出的一個線上轉譯工具,貼上原始程式碼之後,直接輸出轉譯後的程式碼,我們就能拿來用了。

Babel 也不是萬能的

Babel 也不是什麼都能轉譯的,只要是 ECMAScript 標準定義之內的語法,幾乎都能轉譯,但是不在 ECMAScript 標準定義的範圍就要額外想辦法了,像是 Fetch API,它是 HTML5 所定義的 API,有用到的話,就要另外找 Polyfill,以上提供給各位朋友參考。

C# 指南 ASP.NET 教學 ASP.NET MVC 指引
Azure SQL Database 教學 SQL Server 教學 Xamarin.Forms 教學