新手網頁工程師入職必備：快速搭建開發環境指南

文、Raymond老師

「你先建一下環境，然後看看還有什麼問題」

踏入新公司的第一天，你拿到了公司發的筆電，你的主管或mentor在簡單跟你介紹了部門狀況以後，丟下了這句話就先去忙了，此時你可能會有點疑惑，「建環境」究竟應該要先做什麼？難道你可以把公司的電腦變得像你自己在用的個人電腦一樣嗎？這方面我想各個公司應該都有更為細部的資安規定，在開始建立你自己的開發環境前，務必要先把規則搞清楚，才不會踩到公司規定的雷區。

在確認好公司內規定後，通常就可以開始進行所謂的環境佈建，對所有的工程師來說這是必備的技能，越是資深的工程師在開發時可能會同時運用到的工具也可能隨之增加，而多年累積的個人習慣也會影響到開發的效率，這部分的細節甚至可以延伸到編輯器的快捷鍵等等，而本文則會著重在開始網頁開發前可能碰上的一些狀況進行闡述。

建立你自己的開發環境

假設你拿到的是一台什麼都沒有的空白電腦，除了那些你自己個人習慣使用硬體所需要的驅動程式以外，必定需要的東西還有三個：git、瀏覽器、Node.js，git的部分在前一篇已有提過便不在此處多加贅述，接下來讓我們聚焦其餘兩個對於網頁開發十分重要的工具上。

網頁瀏覽器

現今的網頁瀏覽器可說是功能十分強大，以目前較為大宗的Google Chrome或是Firefox，在他們各自的開發者工具中基本上都可以做到即時的調整網頁樣式、監控網頁發生的各種網路請求、分析JavaScript上的程式錯誤等等功能，但對於網頁工程師來說，瀏覽器還有一個最重要的功能，那就是實際反應用戶的所見所用，不同瀏覽器或不同裝置載體所呈現的狀況可能都不盡相同，這也是許多新手常常忽略的重點之一，開發前就該先確認好用戶的使用環境狀況，並在自己的開發環境中選用所需的瀏覽器，才更能貼合用戶的去開發與設計，著迷於新語法卻忽視了相容性也是新手常常踩到的雷點之一，現在也有不少網站整理了瀏覽器相容性的資料，如Mdn Web Docs或是CanIUse等等，都是在開發時值得去複查的資源。

圖片來源：caniuse

Node.js

很多新手工程師會將Node.js單純理解為「讓 JavaScript 可以在server也run起來」的工具，但實際上它所衍伸出來的生態已經不止於此，其中最讓大家愛不釋手的工具之一便是Node Package Manager，也就是俗稱的npm，這讓開發者們可以輕易的站在巨人的肩膀上，功能橫跨前後端甚至檔案處理等等，一般來說，npm會跟著電腦上的Node.js一起自動安裝好，如果專案中有package.json的檔案便可以使用npm相關的指令進行安裝、更新、改動等等的動作，也因此安裝Node.js便會是建環境時不可忽略的步驟。

而此處也是有許多新手工程師會碰到的另外一個障礙處：我究竟要安裝哪個版本的Node.js，對於這個問題筆者必須直接說，請直接詢問你的主管或mentor以確保自己是安裝正確的版本，雖然在大多數情況Node.js都是可以向下兼容的，往最新的穩定版裝通常都不會有問題，但以防萬一還是務必先詢問好才不會踩到奇怪的雷點，安裝時請直接在Node.js查詢安裝途徑即可，不同的OS會有不同的安裝方式，好好閱讀官方文件也是作為工程師必備的技能。

圖源：nodejs

另外若有餘力，筆者也十分推薦使用nvm這個Node.js版本管理工具，因為在公司內往往不會只維護開發單一的專案，在不同專案底下選擇最適配的版本也更能讓自己順利開發。

說了這麼多也許有些人會納悶，這些東西裝完我還是沒辦法開始開發啊，平常我習慣使用的VSCode去哪裡了？編輯器就不重要嗎？由於編輯器本身是一個非常個人化的工具，若以通用性而言個人認為並不是最優先的項目，但也不代表編輯器就不重要，之後再和大家介紹目前較為流行的IDE以及部分輔助工具，若想要了解或學習更多網頁設計知識，歡迎填寫下方表單預約了解課程。

⭐點我加入官方LINE，獲得第一手最新消息⭐

FB粉絲團：https://www.facebook.com/lccnetzone
YouTube頻道：https://www.youtube.com/@Lccnet-TW
痞客邦Blog：http://lccnetvip.pixnet.net/blog