Create React App 2.0 มาแล้ว!!! อัพเดทเป็น Babel 7 และ webpack 4 พร้อมรองรับ Sass และ CSS Modules ตั้งแต่ต้น

อัพเลย อัพเลย

ใครที่เขียน React ช่วงยุคแรกๆ คงจะเคยเซ็งกับการที่จะต้องมานั่งเซ็ทอัพ webpack และ Babel ด้วยตัวเองอย่างแน่นอน ซึ่งทีม React ก็ได้มีการปล่อยตัวช่วยอย่าง Create React App มาให้เราสามารถเริ่มต้นโปรเจคใหม่ได้อย่างรวดเร็ว มาวันนี้ทางทีม React ก็ได้ทำการปล่อย Create React App 2.0 ให้หลุดพ้นจาก beta เป็นที่เรียบร้อย ส่วนจะมีอะไรใหม่บ้างก็ตามมาดูกันเลยยย

Babel 7, webpack 4, Jest 23 และอื่นๆ

  • Create React App 2.0 มีการเพิ่ม option ให้กับการจัดการ style โดยที่เราสามารถใช้ Sass และ CSS Modules ได้โดยไม่ต้อง setup อะไรเพิ่มเติม
  • อัพเดทเป็น Babel 7 ที่รองรับ React fragment (<Fragment>...</Fragment> / <>…</>) และแก้บั๊กในหลายๆ จุด
  • อัพเดทเป็น webpack 4 ที่มีการปรับความฉลาดในการแยกไฟล์ JavaScript แถมยังมีการปรับ performance ให้ build เร็วขึ้นด้วย
  • อัพเดทเป็น Jest 23 ที่มาพร้อมกับ interactive mode สำหรับการรีวิว snapshots
  • สามารถใช้ร่วมกับ Apollo, Relay Modern, MDX และ library นอกอื่นๆ ที่แปลงไฟล์ด้วย Babel Macros
  • Import SVG ให้อยู่ในรูปแบบของ React Component ได้แล้ว
  • สามารถลองใช้ Yarn Plug’n’Play mode ที่จะทำให้เราไม่จำเป็นจะต้องใช้ node_modules
  • สามารถใช้งานกับ proxy ของตัวเองได้แล้ว เพื่อเอาไว้สำหรับเรียกใช้งานกับ API หลังบ้านเวลา dev
  • สามารถใช้ packages ที่เขียนสำหรับ Node version ใหม่ๆ โดยที่ไม่พัง
  • สามารถเลือกลดขนาดของไฟล์ CSS ได้ ถ้าหากว่าแพลนจะใช้เฉพาะกับ browser ตัวใหม่ๆ
  • สามารถเลือกที่จะเพิ่ม Service workers ได้ด้วยตัวเองแล้ว โดยใช้ Service workers ของ Google ที่มีชื่อว่า Workbox

อัพเดทโปรเจคให้เป็น Create React App 2.0

การอัพเดทโปรเจคเก่า (ที่ยังไม่ได้ eject) ก็สามารถทำได้ง่ายๆ โดยการเปลี่ยน react-scripts ให่เป็นเวอร์ชั่น 2.0.3 ในไฟล์ package.json หลังจากนั้นก็รัน yarn install (หรือ npm install แล้วแต่ใครจะใช้อันไหน) เพียงเท่านี้ก็แปลงร่างโปรเจคให้เป็น Create React App 2.0 เรียบร้อย

หรือว่าจะใช้วิธีรัน

npm install — save --save-exact react-scripts@2.0.3 หรือ

yarn add --exact react-scripts@2.0.3

ก็ได้เหมือนกัน

แต่ถ้าใคร eject ไปแล้ว ก็อาจจะต้องใช้ท่ายากหน่อย ก็คือต้องย้อนกลับไปยัง commit ที่ทำการ eject แล้วก็ upgrade ให้เป็น Create React App 2.0 ก่อน แล้วค่อยทำการ eject อีกรอบ

Breaking Changes

แน่นอนว่าอัพเดทเป็นเวอร์ชั่นใหม่แล้วก็ต้องมีสิ่งที่ต้องเปลี่ยนแปลงและอาจจะทำให้ใช้งานไม่ได้บ้าง รวมถึงบางอย่างก็ไม่ support แล้ว ตัวอย่างเช่น

  • ไม่รองรับ Node 6 แล้ว
  • การ support IE9 ถึง IE11 เป็น option เสริม ที่ต้องลง package แยก
  • ใช้ import() เป็นท่าหลักในการทำ Code-splitting และ require.ensure() นั้นถูกปิดไปเรียบร้อย
  • เปลี่ยน Jest environment เป็น jsdom
  • ยกเลิกการ support proxy ที่เป็น object และเปลี่ยนมาใช้เป็น proxy module แทน
  • ยกเลิกการ support ไฟล์ .mjs เพราะว่ายังไม่เสถียร
  • PropTypes ถูกตัดออกจาก production build อัตโนมัติ

ใครอยากลองเล่น ลองใช้ Create React App 2.0 ก็สามารถอัพเดทได้เลยวันนี้ แต่ถ้าคิดว่าที่ใช้อยู่ตอนนี้ก็เร็วแล้ว ยังไม่ต้องอัพ ก็สามารถรอจนกว่า Create React App เวอร์ชั่น 2 นี้ เสถียรก่อนก็ได้เหมือนกันครับ

References

https://reactjs.org/blog/2018/10/01/create-react-app-v2.html

https://github.com/facebook/create-react-app/releases/tag/v2.0.3