【程式新手】為什麼我寫的 JavaScript、Sass 需要編譯？編譯器又是什麼？

在初學程式的時候，我曾經看室友開發專案到一半時，突然坐在那發呆，於是我好奇一問，室友說：「我在等程式編譯完成啊。」

還記得當初還是程式小菜雞的我，懞懂無知的說：「編譯？哈哈哈，我們 JavaScript 都不需要編譯耶，可以直接跑在瀏覽器上。」

室友一臉莫名其妙地回我：「噢，是嗎⋯⋯」

現在回想起來真的想要給自己賞一巴掌，這邊我直接講結論，基本上 client 端（前端、APP）所撰寫的語言都需要經過編譯，才能在特定的執行環境中運行。

在了解編譯究竟是什麼之前，首先要了解：程式碼依照自己所要開發的產品不同，而會有不一樣的執行環境，以我熟悉的前端領域中，一個應用程式的執行環境就是在瀏覽器上，也就是我們常聽到的 Web App。

了解程式碼會有不同的執行環境後，我們就可以來聊聊究竟什麼是編譯器了，首先維基百科針對編譯器的說明是這樣的：

其實我們現在撰寫的語言，有一些是機器（也就是電腦）讀不懂的，於是我們就需要仰賴其他電腦程式來幫我們將這些語言轉換成電腦所看得懂的機器語言，這樣的過程我們就稱為編譯。

這裡還要額外提個小知識，我們現在所撰寫的程式語言，都是人為設計出來的，其中不少是為了讓開發者更方便開發數位產品所誕生的。

舉例來說，JavaScript 的主要開發者 Brendan Eich 花了約 10 天創造出這門語言，為了就是讓開發者能更方便整合網頁開發的技術。

一開始寫 JavaScript 的時候，可能會有些對瀏覽器的誤會，諸如：以為瀏覽器讀得懂所有 JavaScript 的語法、以為 JavaScript 會一邊執行一邊報錯等。

這邊舉個大家最熟悉的例子，許多新的 JavaScript 語法、型別，或是 CSS3 的特定語法， IE 瀏覽器是不支援的，這就能說明，JavaScript 並不是適用於所有的執行環境，更多的是仰賴編譯器（Compiler）來進行處理，讓瀏覽器能讀懂特定的語法。

除了我們所熟知的 Google V8 引擎，可以讓 JavaScript 這個語言在瀏覽器上執行的效能更快外，Bable.js 也是知名的編譯器，可以讓同一支 JavaScript 檔案相容在不同的瀏覽器中。

再來我們聊聊為什麼大家常用的 SASS 程式語言也需要透過 SASS Loader、SASS Compiler 來進行編譯。

原因很簡單：那就是瀏覽器的內建引擎也讀不懂 SASS、SCSS，於是我們就必須仰賴其他的工具來進行編譯，將這門語言轉譯成瀏覽器讀的懂 CSS 。

一旦了解程式語言基本上都是要透過編譯來執行後，就可以減少開發上的除錯時間。

舉例來說，有時候你在框架中發現自己撰寫的程式碼，會一直出現「編譯錯誤」的報錯，基本上有兩個原因：

這件事為什麼會那麼重要呢？

舉個我曾經發生的小蠢事：某一天我很認真地在 Vue Cli 中撰寫 SASS ，但程式碼就是怎麼寫怎麼報錯，最後才發現根本不是我寫錯，而是當時的開發環境根本沒有「SASS Loader」呀。

當然編譯器的套件也會有版本相不相容的問題，但那又是另外一個議題了。

主要是希望大家可以透過這篇文章，稍微了解前端在開發時會遇到的編譯概念，在除錯時可以多一個工具及方向。

希望今天的文章有幫助到正在閱讀的你，如果你喜歡我的文章的話，可以留下你的愛心或是收藏我的文章，也或者可以點選「贊助」，你的一杯咖啡絕對是我持續寫下去的動力！或是透過拍拍手，用你小小的行動支持我的創作！

我是Vivian，我們下次見。

關於我：

一名從英文系畢業的前端工程師，喜歡閱讀、寫東西及自我成長。

｜Instagram: Vivian Yeh｜vivian_enlife

｜聯絡我：vivian.enlife@gmail.com