Master Mac Web Development: คู่มือตั้งค่าสำคัญ

แม้จะสร้างเว็บไซต์พื้นฐานได้ด้วยแค่ Text Editor และ Browser แต่อาจอยากเลเวลอัพด้วย JavaScript Framework เช่น React หรือ Vue และเครื่องมืออย่าง Git

แต่นี่คือจุดสำคัญ: Mac ของคุณยังไม่พร้อม ก่อนดำน้ำ ต้องติดตั้งของจำเป็นเพื่อกัน Error 混亂 ต่อจากนี้

บทความนี้จะนำทาง Setup ขั้นต่ำสำหรับ JavaScript Web Development บน Mac

Let's go!

อัปเดต Mac

ก่อนติดตั้งซอฟต์แวร์ใหม่ ปฏิบัติตามคำแนะนำของ Apple เพื่ออัปเกรด macOS และซอฟต์แวร์ปัจจุบันเป็นเวอร์ชันล่าสุด

เลือก Terminal App

เนื่องจากจะโต้ตอบกับ Mac ผ่าน Command Line ต้องมี Terminal App

ตัวเลือกดีๆ:

Hyper
iTerm2
Integrated Terminal ของ Visual Studio Code
Terminal (Default ของ Mac)

หากไม่แน่ใจ ให้เลือก Hyper

Command Line Developer Tools

สิ่งแรกที่ต้องติดตั้งจาก Command Line คือ Command Line Developer Tools ของ Mac ติดตั้งตอนนี้จะป้องกัน Error แปลกๆ ภายหลัง

เช็คว่าติดตั้งแล้วหรือยัง พิมพ์คำสั่งใน Terminal แล้ว Enter:

xcode-select --version

ถ้าไม่ได้ Version Number ให้ติดตั้งด้วย:

xcode-select --install

จะมี Dialog ถามว่าต้องการติดตั้งหรือไม่ กด Install จะดาวน์โหลดและติดตั้งอัตโนมัติ

ติดตั้งเสร็จ ยืนยันอีกครั้งด้วยคำสั่งแรก:

xcode-select --version

ควรได้ Version Number แล้ว

Homebrew

แทนที่จะติดตั้งเครื่องมือต่อไปทีละตัว (ไปเว็บ หาลิงก์ดาวน์โหลด คลิก Unzip รัน Installer) เราจะใช้ Homebrew

Homebrew คือเครื่องมือที่ติดตั้ง อัปเดต และลบซอฟต์แวร์บน Mac จาก Command Line เร็วกว่า ปลอดภัยกว่า และทำให้ชีวิต Developer ง่ายขึ้น

เช็คก่อนว่าติดตั้ง Homebrew แล้วหรือยัง:

brew --version

ถ้าไม่เห็น Version Number ติดตั้งด้วย:

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

คำสั่งนี่แปลกที่สุดในบทความนี้แล้ว! ? ขอบคุณ Homebrew ที่ทำให้คำสั่งอื่นๆ เรียบง่าย

ก่อนต่อไป ยืนยัน Homebrew ติดตั้งแล้ว:

brew --version

Node และ npm

Node.js คือเครื่องมือที่ให้ Mac รัน JavaScript Code นอก Browser หากอยากรัน Framework อย่าง React หรือ Vue บน Mac ต้องมี Node

Node รวม npm (Node Package Manager) ให้เข้าถึง Library โค้ดฟรีมหาศาล สำหรับโปรเจกต์ของคุณ

เช็คก่อนว่าติดตั้ง Node แล้วหรือยัง:

node --version

ถ้ายัง ติดตั้งด้วย Homebrew:

brew install node

ยืนยัน Node และ npm ติดตั้งแล้ว:

node --version
npm --version

Version Control ด้วย Git

Git คือเครื่องมือช่วยติดตามการเปลี่ยนแปลงโค้ด และทำงานร่วมกับ Developer คนอื่นบนโปรเจกต์ร่วม

ใช้ Git ทุกโปรเจกต์เป็นนิสัยดี และเตรียมพร้อมสำหรับโปรเจกต์อนาคตที่อาจต้องการ Git เครื่องมือบางตัว (อย่าง GatsbyJS) ต้องการ Git ติดตั้งอยู่ จึงต้องมีแม้จะไม่แผนใช้ใน Workflow

เช็คอีกครั้งว่าติดตั้ง Git แล้วหรือยัง:

git --version

ถ้ายัง ติดตั้ง:

brew install git

ยืนยันการติดตั้ง:

git --version

บ้างคราว ให้รันคำสั่งนี้ ทุกอย่างที่ติดตั้งด้วย Homebrew จะอัปเดตอัตโนมัติ:

brew update && brew upgrade && brew cleanup && brew doctor

คำสั่งเดียวนี้พอสำหรับอัปเดตระบบให้ทันสมัย ?

ผมมักรันตอนเริ่มโปรเจกต์ใหม่ แต่ทำเมื่อไหร่ก็ได้ (หาก Homebrew แนะนำคำสั่งเพิ่ม ให้รันต่อ หากคำสั่งขึ้นต้นด้วย sudo และขอ Password ให้ใช้ Admin Password ของ Mac)

Command Line ส่วนนี้จบแล้ว!

Code Editor

เขียนโค้ดใน Text Editor ไหนก็ได้ แต่อันที่ Highlight และ Validate โค้ดจะชีวิตง่ายขึ้น

ตัวเลือกดี:

Visual Studio Code
Atom
Sublime Text

หากเพิ่งเริ่ม ให้เลือก Visual Studio Code

Browser

ขณะเขียนโค้ช ช่วยมากถ้าดู App/Website ที่สร้างใน Browser เพื่อยืนยันว่าใช้งานได้ Browser ไหนก็ได้ แต่อันบางตัวมี Developer Tools เพิ่มแสดงรายละเอียดโค้ดและวิธีปรับปรุง

ตัวเลือกดี:

Chrome
Firefox

หากเพิ่งเริ่ม ให้เลือก Chrome

Finder

เคล็ดลับเร็ว: คุณควรแสดงไฟล์ที่ Mac ซ่อนไว้โดย Default (เช่น ไฟล์ Git ถูกซ่อนอัตโนมัติ แต่บางครั้งอยากแก้ไข)

วิธีง่ายที่สุดแสดง Hidden Files: กด ⌘⇧. (Command + Shift + Period) สลับระหว่างแสดง/ซ่อน ไฟล์เหล่านี้ เพื่อเข้าถึงได้เมื่อต้องการ

สรุป

พร้อมแล้ว! ?

นี่คือทุกอย่างที่ต้องการ เพื่อเริ่ม JavaScript Front-end Development บน Mac

เพื่อป้องกันความสับสน ผมเว้นสิ่งที่ไม่จำเป็นอย่างเคร่งครัด หากอยากลึกขึ้นไปที่ Optional Ways ปรับแต่ง Mac สำหรับ Web Development ดูลิงก์ด้านล่าง