create-react-app หลบไป! มาสร้าง module bundler ด้วย Parcel กันเถอะ
ลองย้ายฝั่งจาก webpack มาเป็น Parcel กันครับ 😬
อย่างที่ทราบกันดีว่า เมื่อเราจะขึ้นโปรเจ็กต์ 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
create-react-app - Create React apps with no build configuration.
github.com
✍️ ทุกอย่างมันก็จบไปได้ด้วยดีนะ จบ…
จบก็แย่ละพ่อหนุ่ม❗️
แค่จะบอกว่า create-react-app มันก็ไม่มีปัญหาอะไร มันก็ดีแหละ แต่ลองหา alternative bundler มาลองให้เล่นกันเฉยๆ ด้วยสาเหตุตามข้างล่างนี้
- create-react-app มันค่อนข้างหนักเลย เพราะมันลงอะไรหลายๆอย่างที่อาจจะไม่จำเป็นสำหรับเรามาให้ด้วย
- create-react-app ไม่สามารถ custom ลงบางตัวได้ หากเราไม่ eject bundle ออกมา (เอา webpack ที่มันเขียนออกมา เพื่อให้เรา custom)
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 ประมาณนี้
step 4 สร้างไฟล์ index.js ตามที่ tag script ของเราต้องการ แบบนี้
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 คงช้ากว่านี้จริงๆ
- CSS มันยังไม่ hot-reload เราต้องไป refresh ที่ browser มันจึงเปลี่ยนการแสดงผล (หรือว่า set ผิดไม่รู้ 😆)
- การ setup เพิ่มเติม เขามีสิ่งที่เรียกว่า automatic transforms (หนึ่งในสิ่งที่มันขายเลยนะ)โดยการเขียนไฟล์เพิ่มเป็น .xxxxxrc เช่น .postcssrc มันก็จะทำการ install module เพิ่มเติมให้เลย
ฝาก repository ด้วยครับ เป็นตัวอย่างที่ผม set จนเรียบร้อยแล้ว เขียนต่อได้เลยเหมือนกันกับ set create-react-app (โดยยังไม่มี error-handler และ test environment)
สุดท้ายนี้ขอบคุณ 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 แต่ก็พอถูไถแหละ 😬😬😬