มาเขียน React ด้วย Gulp และ Browserify กัน

สวัสดีครับ ในบทความนี้เราจะกล่าวถึงการใช้ Gulp กับ Browserify ดังนั้นเราจึงจำเป็นต้องมีความรู้เรื่อง React มาก่อนครับ

Browserify คืออะไร ?

เนื่องจากการเขียน Code เรามักที่จะแยกเขียนเป็นส่วนๆตามวัตถุประสงค์การทำงานเพื่อให้ดูกระชับ เรียบร้อยขึ้น อ่านเข้าใจง่าย แต่ปัญหาคือการเราจะเอา Code เหล่านั้นมาทำงานร่วมกันได้อย่างไร ซึ่งต่างจากใน NodeJS จะมีคำสั่ง require ไว้อยู่แล้ว และ Browserify นี่แหละครับคือคำตอบ เพราะ Browserify เป็น Tool ที่ช่วยทำให้เราสามารถใช้คำสั่ง Require เขียนใน Web Application ได้

แล้วใช้งาน Browserify ยังไงล่ะ ?

ผมขอยกตัวอย่างการทำงานของ Browserify คร่าวๆดังนี้ครับ

1. ใช้คำสั่ง npm install -g browserify ใน command line ครับเพื่อทำการติดตั้งก่อนครับ

2. เมื่อติดตั้ง browserify เสร็จเรียบร้อยแล้ว เรามาลองทำการแยก function ของ JS แบบคนละไฟล์กันครับ
ผมจะทำการสร้าง function sayHello ไว้ในไฟล์ message.js เพื่อที่จะแสดงข้อความ Hello ตามด้วยชื่อครับ

หลังจากนั้นเรียกใช้ function sayHello ใน main.js และแสดงนำไปแสดงข้อความใน Tag div ครับ

เมื่อสร้างไฟล์ JS เรียบร้อย แล้ว เราจะทำการ Build Code โดยใช้คำสั่ง Browserify

เมื่อรันคำสั่งเสร็จเราจะได้ไฟล์ index.js มาครับ เราจะ include ไฟล์นี้ไว้ใน index.html ครับ

เมื่อทำการ Run Web App จะแสดง Output แบบนี้ครับ

หมายเหตุ ผมใช้ NodeJS เป็น Application Server ครับ

จากการทำงานในเบื้องต้นที่กล่าวไว้ สังเกตุว่าทุกครั้งที่เราเขียนไฟล์ใหม่หรือแก้ไขไฟล์ เราจะต้องทำการ Run Command browserify ทุกครั้งหลังจากที่เขียนโปรแกรม ซึ่งก็ดูลำบากยุ่งยากอยู่เหมือนกัน

ดังนั้นผมจึงเสนอตัวช่วยก็คือ Gulp ครับ

Gulp JS คืออะไร ?

Gulp เป็น Javascript Task Runner ที่ช่วยทำ Minify Javascript และแปลง Code ได้ (แปลงจากภาษา Babel ได้ครับ ) ซึ่งทำให้เราทำงานง่ายได้ขึ้น โดยที่เราไม่ต้องทำงานซ้ำซ้อน

แล้วจะใช้งาน Gulp ได้ยังไง ?

1. ใช้คำสั่ง npm install -g gulp เพื่อทำการติดตั้งให้สามารถใช้ command gulp ได้

ต่อมาจะ เราต้องทำการติดตั้ง gulp,browserify,vinyl-source-stream,babelify, babel-preset-es2015,babel-preset-react,browser-sync,watchify ใน project ของตัวเองก่อนครับ เพื่อทำการเขียน Code เพื่อจะทำ Javascript Task Runner ครับ

หลังจากนั้นสร้าง Gulp file

จาก Code ข้างบน เราจะทำการแปลง Code โดยใช้ babelify โดยตั้งว่าให้แปลงจากภาษา es2015, react เป็นภาษา javascript และกำหนด task ว่าถ้ารันคำสั่ง gulp ทั่วไปให้ไปเรียกการทำงานใน function bundle (ผมขออธิบายการทำงานไว้ทีหลังครับ) แต่ถ้าเราใช้คำสั่งว่า gulp watch task ตัวนี้จะทำงานตลอดเวลา และคอยดูว่าถ้ามีการเปลี่ยนแปลง Code ก็จะเรียก function bundle ครับ

ส่วน function bundle การทำงานเป็น chain function โดยที่ถ้าเจอ Error ให้แสดง log ด้วยโดยแปลง Code ออกมาเป็น File Stream ชื่อไฟล์ว่า index.js ใน Folder client ครับ

2. หลังจากนั้น ผมสร้างไฟล์ React แบ่ง Component ตามนี้ครับ

2.1 สร้างไฟล์ hello เพื่อแสดงข้อความ Hello ตามด้วยชื่อ