ในปัจจุบัน ถ้าเราต้องการพัฒนา web app ขึ้นมาสักตัวหนึ่งคงหนีไม่พ้นจะต้องใช้ javascript framework ไม่ว่าจะเป็น react , vue js หรือ angular js (ในบทความนี้จะเน้นที่ reactjs framework) ซึ่งการจะพัฒนา app ด้วย framework นั้นสามารถจะเขียนโดยให้ทำงานอยู่บน web browser โดยเขียนใส่ลงไปใน script tag ตามปรกติก็ได้แต่ก็มีข้อจำกัดที่ต้องระบุ dependency ของ library พวกนั้นเป็น file แยกต่างหาก ใน script tag เพราะ web browser ปัจจุบันไม่ได้ support การเรียก library ผ่านทาง import หรือ require ดังนั้นเพื่อจะให้สามารถดึง library เข้ามารวมกันผ่านทาง import หรือ require จึงจำเป็นจะต้องการใช้ task runner เช่น gulp หรือ grunt หรือ module bundler อย่างเช่น webpack ,browserify หรือ rollup ในการรวม dependency ต่าง ๆ เข้าด้วยกัน นอกจากนี้พวก bundler นี้ก็ยังมีส่วนสำคัญในการ transpile code ให้สนับสนุนความสามารถใหม่ ๆ ของ es 2015 เช่นการใช้ Class, Template Literals, Arrow Functions หรือ async/await (ซึ่ง browser ปัจจุบันก็ไม่ support es2015 นัก) ให้เป็น es5 ที่เข้ากันได้กับ browser ทีใช้กันอยู่ในปัจจุบัน ซึ่ง javascript framework ไม่ว่าจะเป็น react, vue js หรือ angular js ถูกพัฒนาอยู่บนพื้นฐานของ es2015 ทั้งนั้น
ซึ่ง ณ ปัจจุบัน webpack เป็น module bundler ที่ได้รับความนิยมมากที่สุด เนื่องจากความสามารถในการ config ให้ bundle และ transpile ได้ หลากหลาย รวมทั้งมีผู้พัฒนา plugin ต่างๆ ให้เลือกใช้มากมาย
ทำไมเราถึงต้องการ module bundler อีกตัวล่ะ
แม้ว่า webpack จะยืดหยุ่นมาก ๆ ก็ตาม แต่การ setup project ให้ใช้งานได้นั้นค่อนข้างจะยุ่งยาก เพราะต้องมีการ setup entry point, babel preset และ loader ต่าง ๆ รวมถึงการ setup web server จำลอง (webpack-dev-server) เพื่อให้สามารถทดสอบ code ได้ และ การ setup hot reload module เองก็ทำได้ไม่ง่ายนัก จากปัญหาที่กล่าวมาทั้งหมดนี้ เราจะลองมาดูว่า parcel js (https://parceljs.org/) ได้เข้ามาช่วยแก้ปัญหาได้อย่างไรบ้าง
เริ่มต้นเราลองไปดูความนิยมของ parcel js กันที่ github จะเห็นได้ว่ามี star 16000 กว่า ๆ แล้วจากระยะเวลาที่ นับจาก first commit ในเดือนสิงหาคมปีที่แล้ว โดยมี contributor อีกนับสิบคนช่วยกันพัฒนา และช่วยตอนปัญหาผ่านทาง issues ฉะนั้นอุ่นใจได้ว่าไม่ได้ถูกทิ้งกลางทางแน่นอนครับ
ข้อดีของ parcel js คืออะไรล่ะ
จากในหน้า readme ของ parcel ได้
- 🚀 Blazing fast bundle times — multicore compilation, and a filesystem cache for fast rebuilds even after a restart.
- 📦 Out of the box support for JS, CSS, HTML, file assets, and more — no plugins to install.
- 🐠 Automatically transforms modules using Babel, PostCSS, and PostHTML when needed — even
node_modules. - ✂️ Zero configuration code splitting using dynamic
import()statements. - 🔥 Built in support for hot module replacement
- 🚨 Friendly error logging experience — syntax highlighted code frames help pinpoint the problem.
จุดขายสำคัญของ parcel js คือ zero configuration ครับซึ่งทำให้การพัฒนานั้นแทบไม่ต้องไปยุ่งกับการ config เลย , parcel js ยัง build ได้เร็วกว่า webpack , supportการ bundle js,css และ asset file อื่น ๆ ครับ, สามารถ transform asset ด้วย postcss และ posthtml , สามารถทำ code splitting ได้เลย รวมไปถึง มี hot reload มาให้พร้อมใช้เลยครับ
ที่น่าสนใจคือ ทำไมถึงได้มีผู้สนใจมากขนาดนี้
คำตอบสั้น ๆ ก็คือ ความง่ายในการ setup project ของ parcel js และความยืนหยุ่นในการเพิ่มเติม preset ของ babel ทีนี้เราลองมาหาคำตอบดูจากการลองพัฒนา javascript app เล็ก ๆ กันด้วย react ครับ
เราจะเริ่มต้นกันด้วยการสร้าง directory reactapp และ file package.json กันก่อนด้วย
mkdir reactapp
npm init -y
จากนั้นจึง install parcel js, react, react-dom และ babel-preset-react-app (เป็น preset ของ react)
npm install — save parcel-bundler react react-dom babel-preset-react-app
เสร็จแล้วให้สร้าง file index.html ขึ้นมาครับและเพิ่ม code html 5 โดยให้ใส่ script index.js เตรียมไว้ครับ
จากนั้นเราจึงมาสร้าง file index.js ตามนี้ครับ
เสร็จแล้วจึงเพิ่ม .babelrc ครับเพื่อให้ babel สามารถใช้ react-app preset ได้
สุดท้ายจึงมาแก้ไข package.json ครับให้เพิ่ม script ส่วน dev เข้าไป โดยให้เขียนคำสั่ง parcel -p 3000 index.html โดย -p นั้นให้ระบุเป็น port 3000 ถ้าระบุจะใช้ port 1234 เป็น default ครับ
สุดท้ายก็ run โดยใช้คำสั่ง npm run dev เมื่อเข้าไปที่ browser ก็จะพบว่ามี hello react bundle by parcel ปรากฎที่หน้าเพจ จะเห็นได้ว่าการขึ้น page นั้นทำได้ง่ายมากครับไม่ต้องมีการใส่ config ใด ๆ เลยสามารถคิดแล้วเขียนได้เลยโดยไม่ต้องไป copy parse ส่วน config มาจากที่อื่นครับ
เพิ่ม Component
ทีนี้เราลองมาเพิ่ม component กันดูโดยใช้การ import ครับโดยเราจะสร้าง component detail ขึ้นมาใน file component/Detail.js
แล้วให้ไปแก้ไข file index.js โดยเพิ่ม import module ตามนี้ครับ
เมื่อกลับไปเปิด browser ดูจะพบว่ามี hello from detail component เพิ่มขึ้นมาอีกบรรทัดหนึ่งครับ ง่ายใช่ไหมครับ parcel js ทำหน้าที่ในการค้นหา module ให้เราทั้งหมดเลยโดยไม่ต้องทำอะไรทั้งสิ้นนอกจากการ import file javascript ตัวตั้งต้น
เพิ่ม Asset อื่น ๆ
เราลองมาเพิ่ม asset อย่างอื่นเช่น image และ css กันครับ โดยสร้าง file index.css กับ asset/images/logo.svg และแก้ไข file index.js ตามด้านล่างครับ
ลองกลับไปดูที่ browser ดูจะพบว่ามีรูป logo react ปรากฎขึ้นมาพร้อมกันการจัด css ให้อยู๋ตรงกลางครับ
นอกจากจะสามารถใช้ css แล้วเรายังสามารถใช้ scss แทนได้ทันทีโดยที่ไม่ต้อง config เลยครับนอกจากการระบุชื่อ file ให้มีนามสกุล .scss แทนเท่านั้น
การทำ Code Splitting
code splitting เป็น technique หนึ่งที่ช่วยในการแยก file javascript ออกเป็นส่วน ๆ โดยจุดประสงค์หลักของการทำ code splitting ก็เพื่อที่จะช่วยแบ่ง file .js ออกเป็นหลาย file ให้มีขนาดเล็กเพื่อช่วยให้ load javascript file ได้เร็วขึ้น ซึ่งการทำ code splitting โดยปรกติจะอาศัยความสามารถของ dynamic import เพื่อจะบอกให้ module bundler แยกส่วนของ component นี้ออกจาก file .js หลัก เรามาลองพัฒนา code splitting ด้วย parcel js กันดูครับ ให้ไปแก้ไข file Detail.js และเพิ่ม file DynComponent.js ใน folder Component ตามข้างล่างครับ
จาก code ข้างบนจะเห็นได้ว่า เราจะมี button เพิ่มขึ้นมาเพื่อให้ load DynComponent แบบ dynamic import โดยใช้ tehnique code splitting ครับ ทีนี้ลอง กลับไปดูที่ browser เปิด network console ขึ้นมาและ click ที่ button Load Dynamic ดูจะเห็นได้ว่า มี Load Dynamically ปรากฎขึ้น พร้อมกันมีการ load file .js เพิ่มขึ้นมาต่างหากครับ เพราะเราได้ไป trigger event ให้มีการ load DynComponent โดย parcel js เป็นผู้จัดการให้โดยที่เราไม่ต้องไป config ใด ๆ ครับ นอกจานี้เราอาจจะใช้ React Loadable (https://github.com/thejameskyle/react-loadable) ให้ช่วย handle การ load component ให้ดีกว่านี้ได้ครับ
จะเห็นได้ว่าการพัฒนา javascript app นั้นง่ายขึ้นมาครับ การควบคุมทุกอย่างอยู่ที่เราจะกำหนดโดยไม่ต้องยุ่งยากกับการ config file หลาย ๆ file ให้ยุ่งยากครับ นอกจากนี้ถ้าลองแก้ไขไฟล์ index.js ดูก็จะพบว่า หน้า page ที่ browser เปลี่ยนตามไปด้วยหลังจาก save file อันนี้เป็นข้อดีจาก hot reload ที่ parcel ทำไว้ให้โดยที่เราไม่ต้องไป config webpack ให้ยุ่งยากเลย
สุดท้ายเมื่อพัฒนาเสร็จแล้วต้องการ build sourcecode ออกมาเป็น js file ก็ให้เพิ่ม
“build”: “parcel build index.js -d build”
ลงไปที่ package.json และ run npm run build ครับจะมี file reactapp.js ปรากฎขึ้นที่ build directory ที่รวม file ทั้งหมดและ minify และ uglify ให้ด้วยครับ
ท่านสามารถเข้าไปดู source code ทั้งหมดได้ที่
สำหรับบางท่านที่พัฒนา react อยู่แล้ว อาจจะมีคำถามว่า react เองก็มีตัว bundlerที่นิยมอยู่แล้วอย่าง create-react-script ที่ใช้ react-scripts ได้ดีอยู่แล้วทำไมต้องมาสนใจ parcel js ล่ะ คำตอบก็คือ react-scripts ไม่สามารถเพิ่มเติม preset ที่เราอยากจะใช้เป็นพิเศษได้ครับนอกจากจะต้อง run eject ซึ่ง react-scripts จะสร้าง webpack script ขึ้นมาใหม่ทั้งหมด และเราไม่สามารถจะกลับไปใช้ react-scripts ในการพัฒนา program ต่อไปได้อีกครับจะ config อะไรเพิ่มเติมก็ต้องใช้ webpack แต่ในขณะเดียวกัน parcel js สามารถจะเพิ่ม preset โดยการเพิ่มใส่ .babelrc เท่านั้นก็สามารถใช้ได้เลยครับ
นอกจากนี้แล้วเรายังสามารถใช้ parcel ในการพัฒนา plain javascript, typescript, angular js, หรือ vue js ก็ได้เช่นเดียวกันครับ
ขอบคุณที่ติดตามอ่านจนจบครับผม ^_^
(อาจจะเขียนดูงง ๆ บ้างและถ้ามีข้อผิดพลาดประการใดขออภัยไว้ด้วยครับ)
