เริ่มลุยด้วย NPM, Webpack, Babel และ React กันเลย

เนื้อหาของคอร์สนี้ เรียบเรียงขึ้นจาก React.js Fundamental
หมดเวลาภาคทฤษฎี ได้เวลาลุยโปรเจ็กท์จริงกันแล้ว

 NPM

สำหรับพัฒนาระบบซอฟต์แวร์สมัยใหม่นั้น pattern ที่ดีที่สุดของการพัฒนาคือ เราควรแบ่งกลุ่มของ code ออกเป็น module เพื่อให้ง่ายต่อการบริหารจัดการ และทำงานเป็นทีม ประเด็นก็คือ เวลาเราเอา module ของชาวบ้านมาใช้ ซึ่งเป็น module ที่มีคนพัฒนาไว้อยู่แล้วเป็น third party เราจะต้องทำการดาวน์โหลดมาวางใน project folder เอาเอง หรือหากจะใช้งานออนไลน์ ก็ต้องระบุชื่อไฟล์ พร้อมทั้ง path พร้อมทั้งเวอร์ชั่น เช่น

เวลาเราจะเปลี่ยนเวอร์ชั่นที ก็ต้องแก้ที่ path ทีหนึ่ง

ปัญหาจะไม่เกิดเลย หาก Project ของเราใช้ module จากชาวบ้านไม่กี่ตัว แต่ในความเป็นจริงแล้ว เวลาเราสร้างโปรเจ็กท์ขึ้นมาหนึ่งตัว เราต้องพึ่งพิง module จาก third party เยอะมาก ซึ่งในบางกรณีก็ถึงระดับ 20-30 ตัว ดังนั้น การจะมาจัดการ module ต่างๆ ให้มันทำงานด้วยกันได้อย่างราบเรียบ ตั้งแต่ขั้นตอนการติดตั้ง การปรับเวอร์ชั่น และการกระจายงานให้เครื่องของสมาชิกในทีมพัฒนาสามารถใช้งาน module เหล่านี้ได้เหมือนๆ กัน จึงเป็นงานที่ “นรก” มาก

ดังนั้น เราจึงต้องมีซอฟต์แวร์ที่มีชื่อว่า Package Manager ซึ่งซอฟต์แวร์ดังกล่าวนี้ เกิดมาเพื่อตอบวัตถุประสงค์ ดังนี้

1) ต้องทำให้การดาวน์โหลด module ต่างๆ ทำได้ง่ายขึ้น (มันเจ็บปวดทุกครั้ง ที่เราต้องคอยเข้าไปในเว็บไซต์ต่างๆ หรือ github เพื่อทำการดาวน์โหลดด้วยตนเอง)

2) การอัพเกรดเวอร์ชั่นของ module ต่างๆ ต้องทำได้ง่าย

3) การติดตั้ง dependency module ต่างๆ ในเครื่องของทีมพัฒนาในทีม ทำได้ง่าย และเสร็จในไม่กี่ขั้นตอน

NPM (Node Package Manager) จึงเกิดมาเพื่อการนี้

ดังนั้นให้เราทำการดาวน์โหลด ตัว Node.js มาติดตั้งที่เครื่องของตนเองก่อน (ณ ขณะที่เขียนอยู่นี้ Node.js อยู่ที่เวอร์ชั่น 6.9.1)

การติดตั้งก็ไม่มีอะไรมาก ก็แค่ double click แล้วก็ yes, yes, yes ตามสไตล์ dummy installation ของทุก platform

Initial Project

เมื่อติดตั้ง Node.js เสร็จแล้ว มันจะแถมตัว CLI (Command Line Tool) มาด้วย ซึ่งหลังจากนี้ไป เราจะใช้งาน CLI ของ Node.js กันอย่างหนักมาก

เริ่มต้นให้ทำการ initial project โดยเข้าไปที่ path ที่เราต้องการสร้างโปรเจ็กท์

โดยสำหรับ tutorial นี้ ผมจะสร้าง project folder ไว้ที่ ~/Sites/ โดยตั้งชื่อโฟลเดอร์ว่า react-fundamentals/

หลังจากนั้นให้ทำการรัน คำสั่ง

เมื่อสั่งรันแล้ว เราจะต้องกรอกข้อมูลต่างๆ ที่เราต้องการสำหรับโปรเจ็กท์ ดังนี้

เมื่อเสร็จกระบวนการ หากเปิดไปที่โฟลเดอร์ จะเห็นไฟล์ใหม่เกิดขึ้นมาหนึ่งไฟล์ ชื่อว่า package.json ซึ่งไฟล์นี้คือไฟล์แกนกลางสำหรับจัดการกับพวก module ต่างๆ ที่เป็น dependency (module ที่โปรเจ็กท์ของเราต้องใช้งาน หรือแปลตรงๆ ว่า module ที่โปรเจ็กท์ต้อง “พึ่งพา” นั่นเอง) โดยรายละเอียดของไฟล์ package.json จะเป็นดังนี้

Dependencies Installation

เมื่อเรา install node แล้ว และได้ทำการ init project แล้ว ก็ถึงเวลาติดตั้ง module ต่างๆ จาก third party ที่เราจำเป็นต้องใช้งานในโปรเจ็กท์นี้

ให้รันคำสั่งดังต่อไปนี้ใน terminal ณ path ตรง root ของ project folder ของเรา ซึ่งในที่นี้ก็คือ react-fundamentals/

คำสั่ง npm install นั้น ชื่อก็บอกแล้วว่าคือการ install module ต่างๆ ที่จำเป็น โดย parameter –save-dev นั้น คือการบอกให้ไป update รายชื่อ dependency modules ภายในไฟล์ package.json ในกลุ่ม devDependencies ด้วย

ซึ่งเมื่อเรากลับไปดูไฟล์ package.json จะเห็นว่า มีการเปลี่ยนแปลงไปดังนี้

จะมีการเพิ่มในส่วนของ devDependencies เข้ามาตามที่ได้กล่าวแล้ว โดยภายใน sector นี้จะมีการระบุชื่อของ module ที่เราเพิ่งทำการติดตั้งไป

นอกการ update ไฟล์ package.json แล้ว คำสั่ง npm install ยังทำการดาวน์โหลด module ทั้งหมดมาเก็บไว้ในโฟลเดอร์ react-fundamentals/node_modules/ อีกด้วย โดยภายในนั้นจะมีไฟล์ต่างๆ ที่ได้ทำการดาวน์โหลดมาเก็บไว้ในเครื่อง local ของเรา

ประโยชน์ของไฟล์ package.json โดยเฉพาะในส่วนของ devDependencies นี้ ก็คือ ในยามที่สมาชิกในทีมคนอื่นเอาโปรเจ็กท์ของเราไปรันต่อ เขาไม่จำเป็นต้อง copy เอาไฟล์ทั้งหมดใน node_modules/ ไปด้วย (เพราะในระยะยาวแล้ว ขนาดของไฟล์ในโฟลเดอร์นี้จะใหญ่มาก ไม่เหมาะกับการพกพาไปไปที่ไหน และไม่เหมาะกับการ push ขึ้น git repo. ด้วยประการทั้งปวง) แค่เข้าไปที่ root project แล้วรันคำสั่ง

ระบบก็จะทำการติดตั้ง dependencies module ทั้งหมด ในเครื่องโดยไม่ต้องทำอะไรเพิ่มเติม เพียงแค่นี้ เครื่อง laptop/pc ของสมาชิกภายในทีมก็จะสามารถรันโปรเจ็กท์ได้ทันที โดยไม่ต้องมีการติดตั้งอะไรเพิ่มเติมอีก (ยกเว้นต้องติดตั้ง node.js ก่อน มิฉะนั้นก็รัน npm ไม่ได้)

หมายเหตุ หากเราติดตั้ง third party ด้วยคำสั่ง npm install แต่ไม่ใส่ parameter –save หรือ –save-dev แล้ว ทาง npm จะดาวน์โหลดไฟล์ต่างๆ ใน module เหล่านั้นมาไว้ใน node_modules/ โฟลเดอร์ให้เหมือนเดิม แต่จะไม่มีการแก้ไขไฟล์ package.json ซึ่งสมาชิกในทีมที่นำโปรเจ็กท์ของเราไปพัฒนาต่อจะประสบกับความยุ่งยากในการ install dependency modules

Webpack for React

มีคนเคยเล่าลือกันว่า Webpack เป็นเรื่องที่เรียนยาก แต่ในความเป็นจริงแล้ว มันก็ยากจริงๆ นั่นแหละ (แล้วจะพูดทำไม) แต่ประเด็นคือ มันไม่ยากมากไง เรียนแป๊บเดียวก็ใช้งานได้แล้ว แถมไม่ต้องเขียนเยอะ แต่สามารถอำนวยความสะดวกให้การทำงานได้อย่างมหาศาล ในคอร์สนี้เราจะเน้นการใช้งาน Webpack เป็นหลัก โดยในคอร์ส react fundamental นี้จะเน้นฟีเจอร์มาตรฐานใน Webpack ไปก่อน แล้วจะขยับไปใช้ฟีเจอร์ที่แอดวานซ์ขึ้นในคอร์สถัดๆ ไป (คอร์ส Redux นั่นไง)

คำถามก็คือ “ทำไมกรูต้องใช้ Webpack ด้วยวะ?” หรือ “แล้วมันช่วยงานกรูตรงไหน?” ขออนุญาติไล่ตอบทีละคำถามดังนี้

ทำไมกรูต้องใช้ Webpack ด้วยวะ?

Webpack นั้น หน้าที่หลักของมันก็คือ เป็น “ตัวผสม code” หรือ code bundler พูดเป็นภาษาคนก็คือ Webpack จะคอยทำหน้าที่ในการแปลง code แล้วรวม code ทั้งหมดให้พร้อมกับการนำไปใช้ใน production ซึ่งก็คล้ายกับการ compiler ในภาษาคอมพิวเตอร์อย่าง Java หรือ C# นั่นเอง

แล้วมันช่วยงานกรูตรงไหน?

เคยมั๊ย ที่เราต้องทำการเปลี่ยน code ใน HTML, CSS, JavaScript ให้มัน compatible กับ browser ต่างๆ? หรือ หากคุณเป็นคนหนึ่งที่ใช้งาน CSS Preprocessor อย่าง SASS หรือ LESS คุณก็คงจะรู้ดีว่า คุณจะต้องมีหน้าที่แปลง code SASS/LESS เหล่านั้นให้กลายมาเป็น CSS ธรรมดาให้ได้เสียก่อน จึงจะนำไปใช้กับ browser ทั่วไปได้

ตรงนี้ล่ะครับที่ Webpack จะเข้ามาช่วย เพราะขอเพียงแค่คุณสั่ง Webpack ว่า มันจะต้องทำอะไร และแปลงไฟล์แบบไหน มันก็จะทำการแปลงให้คุณโดยอัตโนมัติ จากนั้นก็จะสร้าง output file ใหม่ออกมาที่พร้อมจะนำไปใช้สำหรับ production ได้เลยโดยที่คุณไม่ต้องไปนั่งแก้ code ด้วยตัวเอง

คราวนี้มาถึงขั้นตอนการทำงานที่เราต้องลงมือทำบ้าง ซึ่งหากคุณจะใช้งาน Webpack คุณจะต้องทำ 3 steps ดังนี้

  1. แจ้ง Webpack ให้รู้ว่า Entry Point ของ Application เราอยู่ตรงไหน (ซึ่งก็มักจะเป็น JavaScript File ที่อยู่ที่ Root path ใน Project ของเรา)
  2. แจ้ง Webpack ให้รู้ว่า มันจะต้องแปลง Code แบบไหน กับไฟล์กลุ่มใด
  3. แจ้ง Webpack ให้รู้ว่า หลังจากมีการแปลง code แล้ว มันจะต้องไปสร้างไฟล์ bundle ใหม่ไว้ที่ไหน

ครั้งแรกที่คุณเริ่มทำงานกับ Webpack นั้น คุณจะรู้สึกว่า มันเป็นอะไรที่ดูซับซ้อน และน่ากลัวนิดๆ แต่หากเราพยายาม map code แต่ละบรรทัด เข้ากับขั้นตอนทั้งสามขั้นต้น ทุกอย่างก็จะดูง่ายขึ้น

เริ่มทำงานกับ webpack

ให้ทำการสร้างไฟล์ webpack.config.js ไว้ใน root folder ของ project โดยไฟล์นี้จะเป็นไฟล์ที่ใช้สำหรับ config การทำงานทั้งหมดของ Webpack

จริงๆ แล้ว webpack.config.js คือไฟล์ javascript นั่นแหละ ดังนั้น ทุกอย่างในไฟล์นี้ก็ต้องเขียนขึ้นโดยใช้ภาษา JavaScript เช่นกัน และเนื่องเราเน้นการทำงานกับ Javascript แบบ Module ดังนั้น code javascript ในไฟล์ webpack.config.js ก็ต้องเขียนให้เป็น module ด้วยเช่นกัน วิธีการเขียนก็ไม่ยากครับ ให้เริ่มต้นด้วย code ดังนี้

เพียงเท่านั้นเราก็จะได้ไฟล์ javascript ที่เป็น module แล้ว (หาต้องการรายละเอียดเพิ่มเติมเกี่ยวกับ JavaScript Module ให้ไปอ่านได้จาก ซีรี่ย์ ใน Medium)

ขั้นที่ 1 แจ้ง Webpack ให้รู้ว่า Entry Point ของ Application เราอยู่ตรงไหน

ในขั้นนี้เราจะทำการแจ้งให้ Webpack รู้ว่า entry point javascript file (ไฟล์ javascript หลักของโปรเจ็กท์) ของเราอยู่ตรงไหน ขั้นตอนนี้ให้เราเพิ่ง code ไปดังนี้

ในที่นี้เราแจ้งทาง Webpack ไปว่า entry point ของเราคือไฟล์ react-fundamentals/app/index.js (การระบุไฟล์ในที่นี้ จะระบุแบบ relative กับตำแหน่งของไฟล์ webpack.config.js ซึ่งก็คือ root path นั่นเอง) อาจจะมีคนถามว่าทำไมต้องเป็น array ด้วยสำหรับ entry คำตอบก็คือ Webpack อนุญาติให้คุณระบุ Entry point ได้มากกว่าหนึ่งจุดสำหรับแต่ละ application แต่หากคุณมีเพียงหนึ่ง entry point จะเปลี่ยนจาก array เป็น string ก็ได้ แต่สำหรับมาตรฐานของ tutorial ผมจะคงไว้ซึ่งการใช้ Array สำหรับ Entry point ครับ

ขั้นที่ 2 แจ้ง Webpack ให้รู้ว่า มันจะต้องแปลง Code แบบไหน กับไฟล์กลุ่มใด

งานนี้จะเป็นการบอกกับ Webpack ว่าเราจะแปลง code แบบไหน ด้วย loader (ศัพท์เฉพาะสำหรับตัวที่ใช้แปลงข้อมูล) ซึ่งในที่นี้เราจะใช้ babel-loader (ซึ่งเราได้ทำการติดตั้งไปตั้งแต่ขั้นตอนการลง NPM เรียบร้อยแล้ว) โดยเราต้องระบุตัว loader ให้ Webpack รับรู้ โดยเพิ่ม code ดังต่อไปนี้ลงไป

และก็อีกแล้ว loaders นั้นจะเป็น array ซึ่งก็แปลได้ตรงๆ ว่า เราสามารถระบุ loader (ตัวแปลง code) ได้มากกว่าหนึ่งตัวในแต่ละ application

จากนั้นก็ให้เพิ่ม code เข้าไปใน loader ดังนี้

มาไล่กันทีละตัว

เป็น regular expressions ที่แจ้งให้ Webpack รู้ว่า ไฟล์ที่ลงท้ายด้วย .js ทุกตัวจะถูกนำมาแปลด้วย loader ที่ระบุไว้ตรงตำแหน่งนี้

เนื่องจากไฟล์ทั้งหมดที่อยู่ภายในโฟลเดอร์ node_modules/ นั้นเป็น module ของ third party ซึ่งเราจะไม่เอามา bundle รวมเป็นไฟล์สำหรับ application อยู่แล้ว ดังนั้น เราจึงต้อง exclude มันออกไป ด้วยการระบุไว้ในตำแหน่ง exclude: ว่าเราไม่รวม folder นี้ในการแปลงไฟล์

ตรงนี้เป็นการบอกให้ Webpack รู้ว่า เราจะใช้ loader อะไรเป็นตัวแปลงไฟล์ ซึ่งในที่นี้ก็คือ babel-loader

 

ขั้นที่ 3 แจ้ง Webpack ให้รู้ว่า หลังจากมีการแปลง code แล้ว มันจะต้องไปสร้างไฟล์ bundle ใหม่ไว้ที่ไหน

ในขั้นที่สามนี้จะเป็นการระบุว่าเราจะเอา code ที่เพิ่งได้รับการแปลงนี้ ไป output ไว้ที่ไหน

ให้เราเพิ่ม code  เข้าไปใน webpack.config.js ดังนี้

ตรงนี้น่าจะเป็นส่วนที่น่าจะเข้าใจง่ายที่สุดแล้ว เพราะตัว code มันอธิบายตัวเองได้พอสมควร อย่าง path จะเป็นการระบุว่าให้ Webpack เอาไฟล์ใหม่ไปวางไว้ที่ folder ใด โดย __dirname นั้นคือการอ้างอิงถึงตำแหน่งของ folder ที่เก็บไฟล์ webpack.config.js

ส่วน filename: คือการบอกว่า หลังจากแปลง code เสร็จทั้งหมดแล้ว จะให้ bundle ข้อมูลทั้งหมดไว้ที่ไฟล์ชื่ออะไร ซึ่งในที่นี้ก็คือ index_bundle.js นั่นเอง

โดยสรุปก็คือ จะมีการ output bundle file ไปไว้ที่ react-fundamentals/dist/index_bundle.js

คราวนี้เรามาว่ากันด้วยขั้นตอนพิเศษ กล่าวคือ การจัดการกับ template ไฟล์ที่อยู่ในรูปแบบของ html กัน

ขั้นตอนพิเศษ จัดการกับ template file ใน Webpack

เวลาเราจะสร้าง web application ซักตัวนึง แน่นอนว่าอย่างน้อยจะต้องมีไฟล์ index.html ขึ้นมาซักตัวเพื่อเป็นตัว “ห่อหุ้ม” ระบบเพื่อนำมาใช้แสดงบนหน้า browser ได้ ซึ่งโดยปรกติแล้ว โครงสร้างของ web app ทั่วๆ ไปมักจะวางกันดังรูป

จากตัวอย่างข้างต้น code ของระบบจะถูกวางอยู่ในโฟลเดอร์ app/ ส่วนพวก bundle files จะอยู่ในโฟลเดอร์ dist/

หากมองดูดีๆ คุณอาจจะเริ่มเห็นปัญหาเล็กๆ ที่ซ่อนอยู่ภายในนั้น นั่นคือ เรามี index.html อยู่สองตำแหน่ง คือทั้งใน app/ และใน dist/ ซึ่ง browser จะใช้ index.html จาก dist/ เป็นหลักในการแสดงผลด้วย

สิ่งที่เราต้องการก็คือ ต้องการให้มีการ update ไฟล์ dist/index.html ทุกครั้ง ที่มีการเปลี่ยนแปลง code ภายใน app/index.html ซึ่งแน่นอนว่า วิธีการแบบ manual นั้นเราไม่เอาแน่

ทางเลือกอีกทางก็คือ ให้ Webpack เป็นตัว update ไฟล์ dist/index.html ให้เราโดยอัตโนมัติ ซึ่งสามารถทำได้ผ่าน plug-in ตัวนึงของ Webpack ที่ชื่อว่า html-webpack-plugin (ซึ่งก็เหมือนเดิมตรงที่ เราได้ทำการติดตั้งผ่าน npm ไปตั้งแต่ขั้นตอนก่อนหน้าเป็นที่เรียบร้อยแล้ว)

จากนั้นให้ทำการเพิ่ม code เข้าไปใน webpack.config.js ดังนี้

ไล่ดูกันทีละส่วน

คือการ instantiate object ชื่อว่า HtmlWebpackPlugin จาก module html-webpack-plugin

เป็นการ config ค่าต่างๆ โดย template: คือไฟล์ template ที่เราจะใช้ตั้งต้นสำหรับการนี้

filename: คือชื่อไฟล์ใหม่ที่จะถูกสร้างขึ้น ซึ่งในที่นี้ก็คือ index.html เหมือนเดิม

inject: เป็นการระบุว่าจะ “ฉีด” ไฟล์ bundle ที่เราเพิ่งสร้างจากขั้นตอนที่ 3 เข้าไปอยู่ตรงตำแหน่งไหนในไฟล์ index.html ใหม่ตัวนี้ ซึ่งจะมีให้เลือกระหว่าง <head> กับ <body> ซึ่งในที่นี้เราเลือก <body>

สมมติให้ไฟล์ template เป็นดังนี้

app/index.html

หลังจากที่เรารัน webpack ไปแล้ว ผลที่ได้จะเป็นดังนี้

dist/index.html

จะเห็นว่ามีการ “ฉีด” ตัว script ที่ชื่อว่า index_bundle.js เข้าไปในส่วนของ body ใน dist/index.html

เป็นการแจ้งว่าเราจะใช้ plugin อะไรบ้างใน Webpack นี้ ซึ่งก็แน่นอนว่า มันมาในรูปของ Array เพราะมันสามารถรองรับ plugin ได้หลายตัวต่อหนึ่งโปรเจ็กท์

ว่าด้วยเรื่อง Babel.js

คำถามคือ ทำไมเราต้องใช้ babel-loader มาเป็นตัวแปลงในครั้งนี้ด้วย? ไฟล์ js ที่เรากำลังจะเขียนด้วย React นี้มันใช้กับ browser ไม่ได้เหรอไง?

ก่อนจะไปต่อ เรามาทำความรู้จักกับ Babel.js กันก่อน

Babel.js คือ compiler ของ javascript (เฮ้ย JavaScript ต้องมี compiler ด้วยเรอะ?) หรือพูดให้ถูกต้องก็คือ เป็นตัวแปลงไฟล์ตามมาตรฐานแบบต่างๆ ให้เป็น javascript code ที่ browser เข้าใจได้นั่นเอง (อย่าสับสนกับ Webpack เพราะ Webpack เป็นแค่ตัวกลางที่โหลดเอา loader ต่างๆ มาแปลงไฟล์ให้ ส่วนการจะแปลงไฟล์ด้วยวิธีใด และแปลงแล้ว code จะมีหน้าตาเป็นยังไง เป็นงานของ loader ครับ)

ในโปรเจ็กท์นี้ เราจะสร้าง React Application ซึ่งทาง Facebook ผู้เป็นเจ้าของเทคโนโลยีตัวนี้ ได้ประดิษฐ์ภาษาใหม่ขึ้นมาเรียกว่า JSX ซึ่งก็ต้องเดือดร้อน Babel อีกตรงที่ว่า ภาษา JSX นั้น browser มันไม่รู้จัก ดังนั้น Babel จึงต้องสร้างมาตรฐานการแปลงขึ้นมา

ดังนั้น หากเราจะทำการใช้ตัวแปลง babel สำหรับ react นี้ เราจะต้องทำการติดตั้ง module ที่จำเป็นสามตัวอันได้แก่ babel-core babel-loader babel-preset-react (ซึ่งเราได้ติดตั้งไปเรียบร้อยแล้วตั้งแต่แรก เคี๊ยก เคี๊ยก) โดย babel-core คือตัวแกนหลักของ babel ส่วน babel-loader นั้นใช้สำหรับเป็น loader ใน Webpack และสุดท้ายคือ babel-preset-react คือตัวที่ใช้แปลงจาก JSX -> JS นั่นเอง

เวลาที่เราทำงานกับ babel นั้นจะมีอยู่สองขั้นตอน กล่าวคือ

  1. ระบุ loader เข้าไปที่ Webpack (ซึ่งเราทำเสร็จเรียบร้อยไปแล้ว)
  2. แจ้งระบบให้ทราบว่า babel จะใช้ preset ตัวใด โดยให้สร้างไฟล์ที่ชื่อว่า .babelrc ตรง root project แล้วใส่ code ลงไปดังนี้

อันนี้คือการบอกว่า ระบบจะใช้ preset ของ React ในการแปลงไฟล์ นั่นเอง

ถือเป็นอันเสร็จขั้นตอนการเซตอัพ babel

สรุป

ใน Tutorial นี้เป็นการติดตั้งส่วนพื้นฐานที่จำเป็นสำหรับการสร้างระบบ React ทั้งหมด อันประกอบไปด้วย
NPM: เครื่องมือในการจัดการ Dependencies Modules ทั้งหลาย ให้ระบบของเราสามารถ portable ได้ และแก้ปัญหาในการจัดการกับเวอร์ชั่นต่างๆ ของ module ทั้งหลายในโปรเจ็กท์อีกด้วย

Webpack: tools เอนกประสงค์ที่ช่วยให้เราสามารถ compile code และ bundle ไฟล์ให้เพื่ออำนวยความสะดวกให้ระบบของเราพร้อมใช้งานได้อย่างไม่ยากเย็นนัก แค่ต้องเรียนรู้วิธีการ config นิดหน่อย (ซึ่งบทความนี้ได้สอนวิธีการ config ขั้นต้นอย่างละเอียดไปแล้ว)

Babel: Compiler (หรือตัวแปลงไฟล์) ที่ช่วยทำการแปลงไฟล์ที่ใช้ syntax ประหลาดๆ ทั้งหลายที่ browser ไม่เข้าใจอย่าง JSX, ES6 เป็นต้น ให้กลายมาเป็น JavaScript Code ธรรมดาๆ ที่ browser ทั่วไปสามารถทำความเข้าใจ และรันมันได้ โดยในบทความนี้เราจะใช้ preset หรือมาตรฐานการแปลงไฟล์สำหรับ React มาช่วยในการแปลง JSX ให้กลายเป็น JS ปรกติ

2 COMMENTS