回頭打基礎

早在大約二年前,就有聽說 webpack 在打包 ES6 格式的 javascript 可以不需要使用 babel 就可以了。當時沒有深入去探討其中的原因,也沒有特別花時間去測試。因為現有的專案已經在使用 babel 了,動那些存在已久的設定檔,是一件讓人很有壓力的事情。

最後⋯就不了了之了。

一直到最近,為了解決 electron 開發環境建置中遇到的問題,決定從零開始搭建專案目錄裡的東西。本著沒用到的 module 就不安裝的想法,一步步完成環境。隨著環境的建立到現在,已經採用了 ES6 語法開發的狀況下,目前還沒有安裝 babel 套件。

有個還沒驗證的猜想,因為現在的瀏覽器已經支援許多 ES6 的語法,不管是在 Firefox 或 Chrome 的開發者工具中,使用 const() => {} 之類的語法都沒有問題。最大的,沒有被支援的,大概就是 import 語法之類的吧!

所以 webpack 只要解決這部分的問題, ES6 語法不用過多的轉譯也能夠運作,不見得一定要靠 babel 。

當然 babel 還具有的特性,像是轉譯 javascript 向前相容幾代的瀏覽器,這點 webpack 就不見得作得到。不過說回來,就開發 electron 程式而言,內含的 chromium 就沒有太舊,其實上頭跑的程式沒有過多需要相容的狀況。因為用不到這個功能。

經過這件事,讓我發現,雖然在網路上有許多別人提供好的設定可以直接使用,節省了許多設定的時間,但是去了解它們彼此之間的關係,仍然是很有價值的。遇到像這次 electron 環境的建置,只是因為套件過舊,升級後又冒錯誤訊息,在問題的排除上,有了解,就不會像無頭蒼蝿一樣處處碰壁。

也許不久之後,又會有另一個原因,讓我還是得將 babel 安裝起來。但是至少這個時候,我會知道是為了什麼原因,而 babel 在整體開發上,扮演了什麼角色。