ทำความรู้จัก Yarn สำหรับจัดการ dependency ของ JavaScript

Yarn คือ dependency management tool หรือ package manager สำหรับ JavaScript จากทีมพัฒนาของ facebook ซึ่งบอกว่าเร็ว และ ง่ายต่อการใช้งาน และสามารถ share code/package/module ให้คนอื่น ๆ ได้ด้วย ซึ่งมันมีความสามารถเดียวกับ NPM เลย

เริ่มด้วยการติดตั้ง

ก่อนอื่นต้องทำการติดตั้ง Node.js ก่อนนะ จากนั้นสามารถติดตั้งได้หลายวิธี (Installation) เช่น [code] $brew install yarn หรือติดตั้งผ่าน NPM ก็ได้ !! $npm i -g yarn [/code] จากนั้นลองใช้งานด้วยคำสั่ง [code] $yarn [/code] ถ้าเทียบกับ NMP มันคือ npm install นั่นเอง

เริ่มใช้งานนิดหน่อย ซึ่งไม่ได้ต่างกับ NPM มากนัก

[code] 1. สร้าง project $yarn init 2. ทำการเพิ่ม dependency/package/module $yarn add <package name> 3. ทำการ update dependency/package/module $yarn upgrade <package name> 4. ทำการลบ dependency/package/module $yarn remove <package name> 5. ทำการติดตั้ง dependency/package/module ของ project ซึ่งกำหนดในไฟล์ package.json $yarn หรือ $yarn install [/code]

ปัญหาก็ใช้ได้เลยเมื่อเปลี่ยนจาก npm มาเป็น yarn เช่น

การใช้งานกับ react-scripts ซึ่งทำการสร้างผ่าน create-react-app ในการจัดการ dependency ต่าง ๆ ไม่มีปัญหาอะไร แต่ปัญหาคือ หาไฟล์ script ที่อยู่ใน folder node_modules/.bin/ ไม่เจอ ซึ่งทำให้ไม่สามารถใช้งาน react-scripts ได้เลย !! เมื่อไปดูใน issue ของ yarn ก็พบว่ามีคนแจ้งไปแล้ว issue 1058

ในเรื่องของ performance เมื่อเทียบกับ NPM

ก็มีการแสดงผลให้ดูที่ Compare Yarn Performance ซึ่งให้ผลการทำงานที่รวดเร็วจริง ๆ และจากการลองใช้งานมันก็เร็วกว่าจริง ๆ นะ ส่วน feature อื่น ๆ ยังไม่ได้ทดลองมากนัก

ปิดท้ายด้วยการเปรียบเทียบชุดคำสั่งกับ NPM นิดหน่อย

ซึ่งมีชุดคำสั่งที่เหมือนกันมาก ๆ ดังนี้

• npm init => yarn init
• npm run => yarn run
• npm test => yarn test
• npm login => yarn login
• npm link => yarn link
• npm publish => yarn publish
• npm cache clean => yarn cache clean

ว่าแล้วก็ลองใช้กันดูครับ

ยังคงไปดึง dependency ต่าง ๆ มาจาก NPM repository เหมือนเดิมนะ และยังมี dependency manager อื่น ๆ ให้ใช้อีกนะ

• ied
• pnpm
• npm-install
• npmd

ปล. ชื่อ Yarn มันอาจจะทำให้งงกับ Hadoop Yarn ได้ง่าย ๆ !! Reference Websites https://code.facebook.com/posts/1840075619545360/yarn-a-new-package-manager-for-javascript/ https://shift.infinite.red/npm-vs-yarn-cheat-sheet-8755b092e5cc#.4viy9qn2n