มาทำให้ Project เราใช้ Optional Chaining Operatorได้กันเถอะ
อย่างที่เรารู้กันว่าเจ้าตัว Optional Chaining เนี่ยมันมากับ ES2020 (ES11)
เพราะฉะนั้นใช่ว่า Browser ทุกตัวจะอ่านมันออก
ทีนี้เราลองมา check ดูดีกว่าว่ามี Browser ตัวไหนที่ใช้มันได้บ้าง
!!! แทบไม่มีเลย T_T แล้วทีนี้เราจะเอามันมาใช้ได้ยังไงละ?
ก็คงต้องขอบคุณพระเอกของเรา นั้นก็คือเจ้า babel นั้นเอง
มาเริ่มกันเลย
อย่างแรกเลยเรามาเพิ่มเจ้า dependency ตัวนี้กันก่อน
babel-plugin-transform-optional-chaining
Installation
// npm
npm install --save-dev babel-plugin-transform-optional-chaining// yarn
yarn add -D babel-plugin-transform-optional-chaining
Usage
การ set ให้มันใช้งานได้นั้นทำได้ง่ายมาก
อย่างแรกลองสำรวจใน root projetc กันดูก่อนนะครับว่ามีไฟล์
.babelrc หรือ babel.config.js อยู่หรือป่าว
ถ้า ไม่มี ก็สร้างมันขึ้นมาเลยครับ เลือกเอามันสักตัวนะครับ
ถ้าเลือก .babelrc ก็สร้างไฟล์ .babelrc ขึ้นมาใน root เลย
แต่ถ้าเลือก .babel.config.js ก็ทำเหมือน .babelrc เลยครับ
คือสร้างไฟล์ .babel.config.js ขึ้นมาเองเลย
เสร็จแล้วก็เพิ่ม plugins ตามนี้ เข้าไปในไฟล์ .babelrc หรือ .babel.config.js ได้เลย
"plugins": ["transform-optional-chaining"]ในตัวอย่าง Project นี้เป็น React native expo นะครับ สังเกตว่ามันจะมีไฟล์ .babel.config.js อยู่แล้วเราก็ใส่ plugins เข้าไปได้เลย
แต่ถ้าของใครเป็น .babelrc ก็ใส่ไปแบบนี้เลยครับ
แล้วถ้ามี plugins อยู่ก่อนหน้าแล้วละ เช่นมี plugins ของ lodash อยู่ก่อนหน้า
"plugins": ["lodash"]อย่าไปตกใจ เราก็แค่ใส่ comma คั่น แล้วก็ใส่เจ้า “transform-optional-chaining” มันเข้าไปเพิ่มเลยครับ
"plugins": ["lodash", "transform-optional-chaining"]เสร็จละครับ ง่ายๆ แบบนี้เลย เพียงเท่านี้เราก็จะสามารถใช้งานมันได้แล้ว
ส่วนถ้าใครอยากรู้ไอ้เจ้าตัวนี้มันมีดียังไงก็สามารถเข้าไปอ่านในบทความก่อนหน้าของผมได้ ในเรื่อง มารู้จัก Optional Chaining ใน ES2020 (ES11) กันเถอะ