create-react-app หลบไป! มาสร้าง module bundler ด้วย Parcel กันเถอะ

ลองย้ายฝั่งจาก webpack มาเป็น Parcel กันครับ 😬

แคปจอมาจาก https://parceljs.org/ (เบี้ยวด้วยนะ 555)

อย่างที่ทราบกันดีว่า เมื่อเราจะขึ้นโปรเจ็กต์ react ซักตัวนึง เราก็ต้องมานั่ง setup ทั้งหมด ตั้งแต่ไฟล์ index.html และไฟล์ html นี้ก็จะต้องสั่งให้ไปเรียกไฟล์ index.js และไฟล์ index.js นี้แหละคือตัวที่จะไปเรียก react ทั้งหมด ประมาณนี้ๆ

การที่จะทำให้ javascript มันรวมกันเป็นก้อนเดียวเพื่อให้ html อ่านได้เนี่ย จำเป็นต้องใช้สิ่งที่เรียกว่า module bundler ตัวที่ดังๆ ที่หลายๆคนน่าจะเคยได้ยินชื่อก็น่าจะเป็น webpack

ซึ่งนี่เป็นความเจ็บปวดของผู้ที่มาหัดเขียน react มากๆเลยรู้ป่ะ ที่จะต้องมาทำให้ไอ้นั่นรันได้ ไอ้นี่รันได้ ก่อนที่จะได้เขียนเว็บทั้งหมดซะอีก 🤑

แทนที่เราจะได้เรียนรู้ react js ได้หัดเขียนเลย กลับกลายเป็นว่า ต้องเข้าใจการ setup webpack เสียก่อน

จึงมี lib เทพเจ้าเกิดขึ้น ชื่อว่า create-react-app มาเพื่อให้เราใช้งาน react ได้เลย โดยไม่ต้องลงอะไรเพิ่มทั้งนั้น

facebook/create-react-app

✍️ ทุกอย่างมันก็จบไปได้ด้วยดีนะ จบ…

https://unsplash.com/photos/_c2mhTEg5gE

จบก็แย่ละพ่อหนุ่ม❗️

แค่จะบอกว่า create-react-app มันก็ไม่มีปัญหาอะไร มันก็ดีแหละ แต่ลองหา alternative bundler มาลองให้เล่นกันเฉยๆ ด้วยสาเหตุตามข้างล่างนี้

• create-react-app มันค่อนข้างหนักเลย เพราะมันลงอะไรหลายๆอย่างที่อาจจะไม่จำเป็นสำหรับเรามาให้ด้วย
• create-react-app ไม่สามารถ custom ลงบางตัวได้ หากเราไม่ eject bundle ออกมา (เอา webpack ที่มันเขียนออกมา เพื่อให้เรา custom)

Parcel

Parcel

เป็น module bundler อีกตัวหนึ่ง ที่เขาเคลมว่า build เร็ว และจัดการพวก assets อย่าง js, css, image ได้ง่ายมาก มี hot module reload (HMR) และที่สำคัญ zero configuration ด้วยนะ

เข้ คำว่า zero config นี่บูมพอๆกับ startup ที่พูดว่าจะใช้ blockchain เลยแฮะ 555

ไม่พูดมาก เจ็บคอ ลองทำแบบ step by step กันเลยดีกว่าครับ

step 1 สร้าง project ขึ้นมาซัก project นึง

mkdir demo-react-parceljs 
cd demo-react-parceljs
yarn init -y

จบขั้นตอนนี้ เราจะได้ folder โปรเจ็กต์อันนึง ที่มี package.json เรียบร้อยแล้ว ต่อไป เราจะลง module ที่สำคัญทั้งหมดกันครับ

step 2 install module ที่จำเป็น

yarn add parcel-bundler react react-dom babel-preset-react-app

ขั้นตอนนี้ react project ของเราน่าจะค่อนข้างพร้อมแล้วครับ เหลือเพียงไฟล์ index.html กับไฟล์ index.js เท่านั้น

step 3 สร้างไฟล์ index.html ไว้ใน folder public ประมาณนี้

เลียนแบบ create-react-app มาเลย

step 4 สร้างไฟล์ index.js ตามที่ tag script ของเราต้องการ แบบนี้

นี่ก็เลียนแบบ create-react-app มา 5555

step 5 สร้างไฟล์ App.js ไว้ที่โฟลเดอร์ Components เป็น component แรกได้เลยจย้าา

step 6 สร้างไฟล์ .babelrc เพื่อให้ javascript ของเราเข้าใจ syntax ของ react ครับ

step สุดท้าย ใส่คำสั่งในการ run dev กับ build ลงใน package.json ตามตัวอย่าง

เท่านี้ก็พร้อมสำหรับการ run แล้ว ด้วย

yarn dev สำหรับการลองรัน
yarn build สำหรับ build bundle ขึ้น production

เลียนแบบทุกสิ่งอย่างของ create-react-app 555

จากเท่าที่ลองใช้

• พบว่า เออมันเร็วเหมือนกันนะ ปกติถ้าเป็น create-react-app คงช้ากว่านี้จริงๆ
• CSS มันยังไม่ hot-reload เราต้องไป refresh ที่ browser มันจึงเปลี่ยนการแสดงผล (หรือว่า set ผิดไม่รู้ 😆)
• การ setup เพิ่มเติม เขามีสิ่งที่เรียกว่า automatic transforms (หนึ่งในสิ่งที่มันขายเลยนะ)โดยการเขียนไฟล์เพิ่มเป็น .xxxxxrc เช่น .postcssrc มันก็จะทำการ install module เพิ่มเติมให้เลย

ฝาก repository ด้วยครับ เป็นตัวอย่างที่ผม set จนเรียบร้อยแล้ว เขียนต่อได้เลยเหมือนกันกับ set create-react-app (โดยยังไม่มี error-handler และ test environment)

mnosuk/demo-react-parceljs

สุดท้ายนี้ขอบคุณ Tanakrit Saisillapee สำหรับการโพสต์ลงเฟสบุค 55 อดไม่ได้ต้องไปหาลอง

ขอบคุณ a_adroit สำหรับบทความเรื่องนี้เช่นกัน เป็น get started ได้ดีมากๆครับ https://medium.com/@a_adroit/%E0%B8%A1%E0%B8%B2%E0%B8%9E%E0%B8%B1%E0%B8%92%E0%B8%99%E0%B8%B2-react-%E0%B8%94%E0%B9%89%E0%B8%A7%E0%B8%A2-parcel-js-7f5ddbcf993d

ปล. ได้ทำตาม wishlist อีกข้อนึงสำเร็จละ ตอนเขียน reactjs ใหม่ๆ ไฝ่ฝันว่า ซักวันนึง จะ setup โดยไม่พึ่ง create-react-app ให้ได้ 😆 อาจจะไม่ได้ใช้ webpack แต่ก็พอถูไถแหละ 😬😬😬