【程式新手】為什麼我寫的 JavaScript、Sass 需要編譯？編譯器又是什麼？
更新於 發佈於 閱讀時間約 4 分鐘
在初學程式的時候，我曾經看室友開發專案到一半時，突然坐在那發呆，於是我好奇一問，室友說：「我在等程式編譯完成啊。」
還記得當初還是程式小菜雞的我，懞懂無知的說：「編譯？哈哈哈，我們 JavaScript 都不需要編譯耶，可以直接跑在瀏覽器上。」
室友一臉莫名其妙地回我：「噢，是嗎⋯⋯」
現在回想起來真的想要給自己賞一巴掌，這邊我直接講結論，基本上 client 端（前端、APP）所撰寫的語言都需要經過編譯，才能在特定的執行環境中運行。
編譯器究竟是什麼？
在了解編譯究竟是什麼之前，首先要了解：程式碼依照自己所要開發的產品不同，而會有不一樣的執行環境，以我熟悉的前端領域中，一個應用程式的執行環境就是在瀏覽器上，也就是我們常聽到的 Web App。
了解程式碼會有不同的執行環境後，我們就可以來聊聊究竟什麼是編譯器了，首先維基百科針對編譯器的說明是這樣的：
編譯器（compiler）是一種電腦程式，它會將某種程式語言寫成的原始碼（原始語言）轉換成另一種程式語言（目標語言）。
其實我們現在撰寫的語言，有一些是機器（也就是電腦）讀不懂的，於是我們就需要仰賴其他電腦程式來幫我們將這些語言轉換成電腦所看得懂的機器語言，這樣的過程我們就稱為編譯。
這裡還要額外提個小知識，我們現在所撰寫的程式語言，都是人為設計出來的，其中不少是為了讓開發者更方便開發數位產品所誕生的。
舉例來說，JavaScript 的主要開發者 Brendan Eich 花了約 10 天創造出這門語言，為了就是讓開發者能更方便整合網頁開發的技術。
為什麼我寫的 JavaScript、SASS 需要編譯？
一開始寫 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
436會員
102內容數
為了追求可以窩在座位上、可以心無旁騖思考問題、座位可以亂七八糟沒關係、不需要到處哈腰點頭跑客戶，不用腳踩十公分、連妝都可以不用化的職場人生，文組少女毅然決然踏上RD的養成日常。
留言0
查看全部
你可能也想看
Google News 追蹤
大家好，我是woody，是一名料理創作者，非常努力地在嘗試將複雜的料理簡單化，讓大家也可以體驗到料理的樂趣而我也非常享受料理的過程，今天想跟大家聊聊，除了料理本身，料理創作背後的成本。
哈囉～很久沒跟各位自我介紹一下了～
大家好～我是爺恩
我是一名圖文插畫家，有追蹤我一段時間的應該有發現爺恩這個品牌經營了好像.....快五年了(汗)時間過得真快！隨著時間過去，創作這件事好像變得更忙碌了，也很開心跟很多厲害的創作者以及廠商互相合作幫忙，還有最重要的是大家的支持與陪伴🥹。
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
這篇內容，將會講解什麼是腳本函式，以及與腳本函式相關的知識。包括腳本的簡介、使用函式(或全域變數)的注意事項、定義全域變數、定義函式、什麼是宣告、局部變數的應用。
“所有人寫的程式會變成指令
每一道指令是由CPU執行
而CPU所能理解的指令類型有限”
親愛的讀者
感謝你提出這個問題。這是一個現代社會中很常見且重要的疑惑。隨著科技的迅猛發展，程式設計似乎成了人人必備的技能，讓許多人產生了焦慮和壓力。讓我們從多個角度深入探討這個問題，希望能為你解答心中的疑惑，並提供實用的建議。
JavaScript (簡稱 JS) 是具有一級函數的輕量級、直譯式或即時編譯的程式語言。它因為用作網頁的腳本語言而大為知名，但也用於許多非瀏覽器的環境，像是 Node.js 等。由於 JavaScript 語法上的一些缺點，軟體工程師們又設計出了 CoffeeScript、TypeScript 和
本章目的是為讀者提供有關如何設置JavaScript開發環境的知識，包括在瀏覽器、Node.js和各種編輯器和IDE中編寫和運行JavaScript的信息。此外，本章還介紹了如何架設本地開發伺服器以模擬實際的網頁環境。這些知識對於希望開發前端應用或後端服務的JavaScript開發者來說都是必要的。
如果你曾經撰寫過網頁，那你一定接觸過 JavaScript
無論是在 NodeJs 或是瀏覽器中運行。
但你有沒有想過，我們寫下的 JS 程式碼，這些看似單純的英文和符號，是如何被轉化為機器能夠理解和執行的程式呢？
今天，讓我們一起深入了解其中的核心主角
——Google 開發的開源 Java
前言：
一直想要把自己的學習筆記整理整理，至少在寫下筆記的時候，也能釐清觀念。
結果拖延到現在，終於要提筆了，不知道能堅持多久(???)。
VS code是什麼？
Visual Studio Code（通常縮寫為VS Code）是微軟開發的一款免費且開源的跨平台文本編輯器。它支持廣泛的編程語言，提供了一系列先進功能和插件，讓開發者能更有效率地進行代碼編寫。VS Code擁有優秀的代碼自動完成、錯誤偵測、內建的版本控制系統等特性。
「有時候，人們會嘲笑我們國家竟有這麼多過剩的書籍。可是，如果我還年輕有幹勁，我會選擇當編輯，從事出版事業。我們有責任讓智慧一直延續下去，絕對不可以把它當作炒熱門，卻罔顧良心的工作，因為那些粗製濫造的新書對於世界文學的危害程度，可能要遠大過戰爭帶來的後患。」～赫曼．赫塞
大家好，我是woody，是一名料理創作者，非常努力地在嘗試將複雜的料理簡單化，讓大家也可以體驗到料理的樂趣而我也非常享受料理的過程，今天想跟大家聊聊，除了料理本身，料理創作背後的成本。
哈囉～很久沒跟各位自我介紹一下了～
大家好～我是爺恩
我是一名圖文插畫家，有追蹤我一段時間的應該有發現爺恩這個品牌經營了好像.....快五年了(汗)時間過得真快！隨著時間過去，創作這件事好像變得更忙碌了，也很開心跟很多厲害的創作者以及廠商互相合作幫忙，還有最重要的是大家的支持與陪伴🥹。
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
這篇內容，將會講解什麼是腳本函式，以及與腳本函式相關的知識。包括腳本的簡介、使用函式(或全域變數)的注意事項、定義全域變數、定義函式、什麼是宣告、局部變數的應用。
“所有人寫的程式會變成指令
每一道指令是由CPU執行
而CPU所能理解的指令類型有限”
親愛的讀者
感謝你提出這個問題。這是一個現代社會中很常見且重要的疑惑。隨著科技的迅猛發展，程式設計似乎成了人人必備的技能，讓許多人產生了焦慮和壓力。讓我們從多個角度深入探討這個問題，希望能為你解答心中的疑惑，並提供實用的建議。
JavaScript (簡稱 JS) 是具有一級函數的輕量級、直譯式或即時編譯的程式語言。它因為用作網頁的腳本語言而大為知名，但也用於許多非瀏覽器的環境，像是 Node.js 等。由於 JavaScript 語法上的一些缺點，軟體工程師們又設計出了 CoffeeScript、TypeScript 和
本章目的是為讀者提供有關如何設置JavaScript開發環境的知識，包括在瀏覽器、Node.js和各種編輯器和IDE中編寫和運行JavaScript的信息。此外，本章還介紹了如何架設本地開發伺服器以模擬實際的網頁環境。這些知識對於希望開發前端應用或後端服務的JavaScript開發者來說都是必要的。
如果你曾經撰寫過網頁，那你一定接觸過 JavaScript
無論是在 NodeJs 或是瀏覽器中運行。
但你有沒有想過，我們寫下的 JS 程式碼，這些看似單純的英文和符號，是如何被轉化為機器能夠理解和執行的程式呢？
今天，讓我們一起深入了解其中的核心主角
——Google 開發的開源 Java
前言：
一直想要把自己的學習筆記整理整理，至少在寫下筆記的時候，也能釐清觀念。
結果拖延到現在，終於要提筆了，不知道能堅持多久(???)。
VS code是什麼？
Visual Studio Code（通常縮寫為VS Code）是微軟開發的一款免費且開源的跨平台文本編輯器。它支持廣泛的編程語言，提供了一系列先進功能和插件，讓開發者能更有效率地進行代碼編寫。VS Code擁有優秀的代碼自動完成、錯誤偵測、內建的版本控制系統等特性。
「有時候，人們會嘲笑我們國家竟有這麼多過剩的書籍。可是，如果我還年輕有幹勁，我會選擇當編輯，從事出版事業。我們有責任讓智慧一直延續下去，絕對不可以把它當作炒熱門，卻罔顧良心的工作，因為那些粗製濫造的新書對於世界文學的危害程度，可能要遠大過戰爭帶來的後患。」～赫曼．赫塞