Coding Gun

วิธีการติดตั้งและใช้งาน Yarn

Yarn คือเครื่องมือสำหรับจัดการและติดตั้งแพ็กเกจของ JavaScript(Package Manager) ซึ่งพัฒนาขึ้นมาโดย Facebook ทำหน้าที่เหมือนกับ npm แต่มีข้อดีคือ


การติดตั้ง Yarn

เราสามารถติดตั้ง Yarn มาใช้งานแทนที่ npm ได้ด้วยทางเลือกต่างๆ ดังนี้

ติดตั้งผ่าน npm

เราสามารถใช้ npm ติดตั้ง yarn ด้วยคำสั่ง

npm install --global yarn

ติดตั้งผ่าน Homebrew (macOS)

บน MacOS คุณสามารถติดต้ัง yarn โดยใช้ brew ได้ด้วยคำสั่ง

brew install yarn

ตรวจสอบเวอร์ชัน

หลังจากติดตั้ง yarn เรียบร้อยแล้วให้คุณลองตรวจสอบ Version ของ yarn ที่อยู่ในเครื่องด้วยคำสั่ง

yarn --version

วิธีการใช้งาน Yarn

Create New Project

หลังจากที่เราทำการติดตั้ง yarn ลงมาในเครื่องเรียบร้อย หลังจากนี้เราจะลองสร้าง Project ขึ้นมาใหม่โดยใช้คำสั่ง yarn init ดังนี้

mkdir my-app
cd my-app
yarn init

จากนั้นตอบคำถามต่างๆ เช่น ชื่อโปรเจกต์, เวอร์ชัน, คำอธิบาย ถ้าอยากใช้ค่า default ทุกอย่างเราสามารถใช้ -y เพื่อตอบ yes ทุกๆข้อได้เลย

yarn init -y

Install Package

หลังจากสร้าง Project ใหม่ขึ้นมาเรียบร้อยในขั้นตอนต่อไปเราจะทำการติดตั้ง Package เข้ามาใหม่ โดยในตัวอย่างเราจะติดตั้ง Lodash เข้ามาใน Project ด้วยคำสั่ง

yarn add lodash

ถ้าเราต้องการติดตั้ง Package ต่างๆเข้าในใช้งานเฉพาะตอน Development เช่น Typescript, Jest, Mocha และอื่นๆ(ส่วนใหญ่เป็น Library สำหรับการทดสอบ)

yarn add typescript --dev

หรือเขียนสั้นๆด้วย -D

yarn add typescript -D

และถ้าเราต้องการติดตั้งหลายๆ Package พร้อมกันเราสามารถเว้นวรรคได้เลย เช่น

yarn add react react-dom

Remove Package

หลังจากที่เราไม่ต้องการใช้ Package ต่างๆเหล่านี้แล้วเราจำ Uninstall หรือ Remove ออกด้วยคำสั่ง

yarn remove lodash

Update Package

หลังจากที่เราใช้งานไปซักระยะแล้วต้องการ Update Packages ต่างๆใน Project นี้เราสามารถใช้คำสั่ง yarn upgrade ได้เลย

yarn upgrade lodash

หรือถ้าจะ Update ทุก Packages เราจะใช้คำสั่ง

yarn upgrade

Install Dependencies

หลังจกาที่เรา Clone โปรเจกต์ลงมา ใน Project ของเราจะยังไม่มี Library ใดๆติดตั้งไว้เลย ดังนั้นก่อนที่เราจะ Run Project นี้เราต้องติดต้ัง Library หรือ Package ที่ Project นี้ต้องการก่อนด้วยคำสั่ง

yarn install

ซึ่ง yarn จะติดตั้ง Packages ที่ได้ระบุไว้ใน package.json และ yarn.lock


การ Run Script

นอกจากการติดตั้งและจัดการกับ Packages ต่างๆที่ได้ติดตั้งเข้ามาแล้ว เรายังสามารถระบุคำสั่งที่ใช้บ่อยๆไว้ใน package.json ได้เลย ยกตัวอย่างเช่น

"scripts": {
  "start": "node index.js",
  "dev": "nodemon index.js"
}

เราสามารถเลือก run index.js โดยการใช้ yarn start ได้เลย เราก็ไม่ต้องจำหลายคำสั่ง โดยเฉพาะในคำสั่งที่ต้องกำหนด Parameters เข้าไปหลายๆตัว

yarn start
yarn dev

ในการเรียกใช้งาน Script นั้นเราไม่ต้องพิมพ์ run ยกเว้นว่าชื่อที่ใช้นั้นเป็นคำที่ตรงกับ yarn เช่นถ้าเราตั้งชื่อ Script เป็นตำว่า build เราต้องพิมพิ์ yarn run build


สรุปคำสั่งของ Yarn

คำสั่ง npm ความหมาย
yarn init npm init สร้างโปรเจกต์ใหม่
yarn add <pkg> npm install <pkg> ติดตั้ง dependencies
yarn add <pkg> -D npm install --save-dev <pkg> ติดตั้ง devDependencies
yarn remove <pkg> npm uninstall <pkg> ลบแพ็กเกจ
yarn install npm install ติดตั้ง dependencies ทั้งหมด
yarn upgrade npm update อัปเดตแพ็กเกจ
yarn run <script> npm run <script> รันสคริปต์จาก package.json
yarn cache clean npm cache clean --force ล้าง cache
yarn global add <pkg> npm install -g <pkg> ติดตั้งแพ็กเกจแบบ global
Phanupong Permpimol
Follow me