หน้าแรก>การสอนการออกแบบเว็บไซต์>การสอนจาวาสคริปต์

เรียนรู้ตัวจัดการแพ็คเกจ Node อันทรงพลังสองตัว: npm และเส้นด้าย

ผู้เขียน：Eve Cole เวลาอัปเดต：2023-04-04 10:39:22

บทความนี้จะพาคุณไปรู้จักกับเครื่องมือจัดการแพ็คเกจอันทรงพลังสองตัวของ Node.js: npm และ Yarn ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ!


6306e547ba2a5383.jpg


หลักสูตรแนะนำ Node.js ฉบับย่อ: เข้าเรียนเพื่อเรียนรู้

ขั้นตอนแรกในการเรียนรู้ Node คือการทำความเข้าใจ Package Manager ของ Node : npm ฉันเชื่อว่าทุกคนคุ้นเคยกับ npm เพราะเรามักใช้มันเพื่อดาวน์โหลดทรัพยากรแพ็คเกจบางส่วน

แต่เนื่องจากไลบรารีทรัพยากรของ npm (https://www.npmjs.com/) อยู่ต่างประเทศ ความเร็วในการดาวน์โหลดทรัพยากรโดยใช้ทรัพยากรจึงค่อนข้างช้า ดังนั้น node包管理器บุคคลที่สาม เช่น yarn และในประเทศจึงซิงโครไนซ์กับ npm คลังสินค้า อัปเดต กระจก Taobao (cnpm)

ต่อไปเราจะมาเรียนรู้เนื้อหาเหล่านี้แบบเจาะลึก เรามาเริ่มกันเลย!

คอลัมน์ชุดโหนดเริ่มได้รับการอัปเดตแล้ว ติดตามบล็อกเกอร์ สมัครสมาชิกคอลัมน์ และเรียนรู้โหนดโดยไม่หลงทาง!

1. การใช้ npm

เวลาบ่ายโมงคืออะไร

ก่อนที่จะใช้ npm คุณต้องเข้าใจว่า npm คืออะไร ในบทความแรกของคอลัมน์ Node series [Node.js | วิธีเดียวจาก front-end ไปจนถึง full stack] มีการกล่าวถึง npm เป็นคลังข้อมูลโอเพ่นซอร์สของ Node และเป็นคลังสินค้าโอเพ่นซอร์สที่ใหญ่ที่สุดในโลก

ที่อยู่ของคลังสินค้านี้คือ: https://www.npmjs.com/

ณ วันที่ 17 มีนาคม 2020 npm ให้บริการแพ็คเกจ 1.3 ล้าน แพ็คเกจแก่นักพัฒนาประมาณ 12 ล้าน คน ซึ่งดาวน์โหลดแพ็คเกจเหล่านี้ 75 พันล้านครั้ง ต่อเดือน

หากต้องการดาวน์โหลดและใช้ทรัพยากรในคลังสินค้า npm คุณสามารถใช้ npm的指令(เริ่มต้นด้วย npm เช่น npm i axios download axios ) หรือใช้คำสั่งของบุคคลที่สามอื่นๆ ( Node包管理器บุคคลที่สาม) เช่นเส้นด้าย ฯลฯ .

คำแถลงอย่างเป็นทางการ: npm เป็นเครื่องมือการจัดการและการแจกจ่ายแพ็คเกจสำหรับ NodeJS

การจัดการแพ็คเกจ สะท้อนให้เห็นในความเป็นจริงว่าเป็นคลังสินค้า NodeJS ซึ่งจัดเก็บและจัดการแพ็คเกจซอฟต์แวร์ NodeJS ต่างๆ

เครื่องมือการแจกจ่าย รวมอยู่ในการใช้ npm的指令เพื่อดาวน์โหลดแพ็คเกจในคลังสินค้า npm

เมื่อเรากำหนดค่าสภาพแวดล้อม NodeJS npm指令模块จะถูกติดตั้งพร้อมกับ NodeJS เราสามารถรัน npm -v ผ่านเทอร์มินัลเพื่อดูเวอร์ชันที่ติดตั้ง:


ใส่คำอธิบายรูปภาพที่นี่


แต่หากเวอร์ชัน npm ที่ติดตั้งเริ่มต้นเก่าเกินไป คุณสามารถ ติดตั้งและอัปเดต npm ด้วยตนเองได้:

 npm ฉัน npm@latest -g

@latest หมายถึงการติดตั้งเวอร์ชันล่าสุด -g หมายถึงการติดตั้งทั่วโลก คำแนะนำ npm เหล่านี้จะกล่าวถึงในภายหลัง

สิ่งมหัศจรรย์สามารถพบได้ด้านบน เรากำลังติดตั้ง npm ถึง npm เราสามารถติดตั้งเองได้หรือไม่?

นี่เป็นเรื่องง่ายที่จะเข้าใจ npm的指令模块ยังถูกจัดเก็บไว้ในคลังสินค้า npm เป็นแพ็คเกจ และชื่อของแพ็คเกจนี้คือ npm ดูที่อยู่ npm :

https://www.npmjs.com/package/npm


ใส่คำอธิบายรูปภาพที่นี่


ดังนั้นสิ่งที่ เราเรียกโดยทั่วไปว่า npm นั้นหมายถึงโมดูลคำสั่งของ npm (แพ็คเกจชื่อ npm)

แต่ในความเป็นจริง คำว่า npm หมายถึง npm指令模块และยังหมายถึง npm เป็นคลังโอเพ่นซอร์สของ NodeJS ด้วย ดังนั้นเราจึงดาวน์โหลด npm ใน npm (npm นี้แสดงถึงคลังโอเพ่นซอร์สของ NodeJS) (npm นี้หมายถึงคลังโอเพ่นซอร์สของ NodeJS) คลังต้นทางชื่อ npm แพ็คเกจนี้ แพ็คเกจนี้เป็นโมดูลคำสั่งของ npm)

คำสั่งทั่วไปของ npm

มีคำสั่ง npm มากมาย ที่นี่เราจะแสดงรายการเฉพาะคำสั่งที่ใช้กันทั่วไปเท่านั้น สำหรับข้อมูลเพิ่มเติม โปรดดูเอกสารประกอบอย่างเป็นทางการของ npm

  • ใส่คำอธิบายรูปภาพที่นี่ npm init : สร้าง package.json



  • npm install : ดาวน์โหลด ทรัพยากรทั้งหมด ที่บันทึกไว้ใน package.json

  • npm install 包名: ดาวน์โหลด แพ็คเกจที่ระบุไปยังไดเร็กทอรีปัจจุบัน

  • npm uninstall 包名: ถอนการติดตั้ง แพ็คเกจที่ระบุในไดเร็กทอรีปัจจุบัน

  • npm update 包名: อัพเดต แพ็คเกจที่ระบุในไดเร็กทอรีปัจจุบัน หากไม่มีการเพิ่มชื่อแพ็คเกจ แพ็คเกจทั้งหมดในไดเร็กทอรีปัจจุบันจะถูกอัพเดต

  • npm outdated 包名: ตรวจสอบ ว่าแพ็กเกจที่ระบุในไดเร็กทอรีปัจจุบันล้าสมัยหรือไม่ หากไม่มีการเพิ่มชื่อแพ็กเกจ แพ็กเกจทั้งหมดในไดเร็กทอรีปัจจุบันจะถูกตรวจสอบ

  • npm info 包名: รับ ข้อมูลโดยละเอียด เกี่ยวกับแพ็คเกจในไดเร็กทอรีปัจจุบัน

  • npm list : ดู แพ็คเกจทั้งหมดที่ติดตั้งในไดเร็กทอรีปัจจุบันและการอ้างอิงและแสดงหมายเลขเวอร์ชัน ( list สามารถย่อเป็น ls )

  • npm list 包名: ดู หมายเลขเวอร์ชันของแพ็คเกจที่ระบุ ที่ติดตั้งในไดเร็กทอรีปัจจุบัน ( list สามารถย่อเป็น ls )

ประเด็นเพิ่มเติมบางประการ:

  1. install สามารถย่อว่า i เช่น: npm install axios สามารถย่อว่า npm i axios

  2. uninstall ย่อมาจาก un

  3. เพิ่มสัญลักษณ์ @ หลังชื่อแพ็คเกจเพื่อระบุเวอร์ชันของแพ็คเกจ เช่น: npm i md5@1 ดาวน์โหลดเวอร์ชัน 1 ของ md5, npm i md5@latest หมายถึงการดาวน์โหลด md5 เวอร์ชันล่าสุด

ส่วนต่อท้ายคำสั่ง npm

  • -g : ระบุ สภาพแวดล้อมโกลบอล

    คำสั่ง npm มีค่าเริ่มต้นเป็นปฏิบัติการในไดเร็กทอรีปัจจุบัน การเพิ่ม -g ระบุการทำงานใน สภาพแวดล้อมแบบโกลบอล ดังที่กล่าวไว้ข้างต้น ให้ติดตั้ง npm เวอร์ชันล่าสุดแบบโกลบอล: npm i npm@latest -g เพื่อให้สามารถใช้ npm ในไดเร็กทอรี ใดก็ได้ .

  • --save สามารถย่อเป็น -s : ระบุการพึ่งพาใน สภาพแวดล้อมการผลิต (บันทึกใน dependencies )

    หลังจากเวอร์ชัน npm5 ค่าดีฟอลต์คือ --save ตัวอย่างเช่น axios จำเป็นต้องติดตั้งทั้งในสภาวะแวดล้อมการใช้งานจริงและสภาวะแวดล้อมการพัฒนา: npm i axios -s

  • --save-dev สามารถย่อเป็น -D : ระบุการพึ่งพาใน สภาพแวดล้อมการพัฒนา (บันทึกใน devDependencies )

    หากต้องการติดตั้ง babel ที่ไม่จำเป็นในสภาพแวดล้อมการใช้งานจริง (ใช้เฉพาะในสภาพแวดล้อมการพัฒนา): npm i babel -D

  • --save-prod สามารถย่อเป็น -P : เช่นเดียวกับ --save

  • --save-optional สามารถย่อเป็น -O : ระบุ การพึ่งพาเพิ่มเติม (บันทึกใน optionalDependencies )

  • --no-save : จะไม่ถูกบันทึกใน package.json

สำหรับฟังก์ชั่นเฉพาะและความแตกต่าง -g，--save，--save-dev โปรดดูบทความของฉัน: ความแตกต่างระหว่าง npm install -g/–save/–save-dev

ส่วนต่อท้ายคำสั่ง npm สามารถวางไว้หน้าชื่อแพ็กเกจได้: npm i -g npm@latest

การจัดการแพ็คเกจการพึ่งพา

ใน npm การขึ้นต่อกันที่รู้จักกันดีคือ: dependencies และ devDependencies

นอกจากนี้ จริงๆ แล้วยังรวมถึง:

  • peerDependencies

  • optionalDependencies

  • bundledDependencies / bundleDependencies

การขึ้นต่อกันหลายอย่าง รวมถึงสิ่งเหล่านี้ จะถูกบันทึกไว้ใน package.json :


ใส่คำอธิบายรูปภาพที่นี่


ข้างต้นเราได้กล่าวถึงการขึ้นต่อกันเหล่านี้เมื่อพูดถึง ส่วนต่อท้ายคำสั่ง npm ต่อไปนี้เป็นคำอธิบายโดยละเอียดเกี่ยวกับสิ่งที่พวกเขาเป็นตัวแทน:

dependencies และ devDependencies

ลองอ่านบทความอื่นของฉัน: ความแตกต่างระหว่าง npm install -g/–save/–save-dev

peerDependencies

คุณสามารถตรวจสอบบทความโดยคนสำคัญ: ทำความเข้าใจ peerDependencies ในบทความเดียว

optionalDependencies

การขึ้นต่อกันที่เป็นทางเลือก หากมีแพ็คเกจที่ต้องพึ่งพาซึ่งยังคงสามารถทำงาน optionalDependencies optionalDependencies เขียนทับการขึ้นต่อกันด้วยชื่อเดียวกันใน dependencies ดังนั้นอย่า เขียนไว้ในทั้งสองแห่ง

bundledDependencies / bundleDependencies

การพึ่งพาบรรจุภัณฑ์ bundledDependencies เป็นอ็อบเจ็กต์อาร์เรย์ที่มีชื่อแพ็กเกจที่ต้องพึ่งพา เมื่อเผยแพร่ แพ็กเกจในออบเจ็กต์นี้จะถูกแพ็กเกจลงในแพ็กเกจรีลีสขั้นสุดท้าย จะต้องประกาศแพ็กเกจใน devDependencies หรือ dependencies ก่อน มิฉะนั้น แพ็กเกจจะรายงาน ข้อผิดพลาด.

ปัญหาเวอร์ชันแพ็กเกจที่ต้องดำเนินการใน package.json

ข้อมูลเวอร์ชันของแพ็คเกจทั้งหมดที่ดาวน์โหลดผ่าน npm จะถูกบันทึกไว้ใน package.json

เมื่อรัน npm i มันจะถูกดาวน์โหลดตามข้อมูลแพ็กเกจที่บันทึกไว้ใน package.json กฎการดาวน์โหลดมีดังนี้:

  • เมื่อเวอร์ชันแพ็คเกจขึ้นต้นด้วย ^ (ค่าเริ่มต้น) เวอร์ชันใหญ่จะถูกล็อค

     // package.json
"การอ้างอิง": {
"md5": "^2.1.0" // } ขึ้นต้นด้วย ^,

    ผ่าน npm i เวอร์ชันล่าสุดของ md5 2.xx (เวอร์ชันล่าสุดภายใต้สองเวอร์ชันหลัก) จะได้รับการติดตั้ง ซึ่งไม่จำเป็นต้องเป็น 2.1.0 แต่อาจเป็น 2.3.0 ด้วย

  • เมื่อเวอร์ชันแพ็คเกจขึ้นต้นด้วย ~ จะถูก ล็อคเป็นเวอร์ชันหลักที่สอง

     // package.json
"การอ้างอิง": {
"md5": "~2.1.0"
-

    ในเวลา npm i จะติดตั้ง md5 2.1.x เวอร์ชันล่าสุด (เวอร์ชันล่าสุดภายใต้เวอร์ชัน 2.1) ซึ่งไม่จำเป็นต้องเป็น 2.1.0 แต่อาจเป็น 2.1.1 ด้วย

  • เวอร์ชันแพ็คเกจคือ * และจะถูก ล็อคเป็นเวอร์ชันล่าสุด

     // package.json
"การอ้างอิง": {
"md5": "*"
-

    ผ่านทาง npm i จะติดตั้ง md5 เวอร์ชันล่าสุด

  • หากไม่มีคำนำหน้าก่อนเวอร์ชันแพ็คเกจ ก็จะ ถูกล็อคเป็นเวอร์ชันที่ระบุ

     // package.json
"การอ้างอิง": {
"md5": "2.1.0"
-

    ผ่านทาง npm i จะติดตั้ง md5 เวอร์ชัน 2.1.0

แก้ปัญหาความเร็ว npm ช้า

เนื่องจากคลังสินค้า npm อยู่ต่างประเทศ จะช้ากว่าสำหรับเราที่จะใช้คำสั่ง npm ในประเทศจีนเพื่อดาวน์โหลดเนื้อหาของคลังสินค้าต่างประเทศนี้

ในขณะนี้ เราสามารถรันคำสั่งต่อไปนี้เพื่อสลับแหล่งคลังสินค้า npm ไปเป็นแหล่ง อิมเมจ Taobao ในประเทศ (cnpm) :

 รีจิสทรีการตั้งค่า npm https://registry.npmmirror.com

ใช้ npm config get registry เพื่อดูแหล่งที่มาปัจจุบัน:

ใส่คำอธิบายรูปภาพที่นี่


เมื่อคุณใช้ npm ในอนาคต มันจะถูกดาวน์โหลดโดยอัตโนมัติจากคลังกระจก Taobao ในประเทศ และความเร็วจะเร็วมาก

ที่อยู่ต้นทางก่อนหน้าของมิเรอร์ Taobao คือ http://registry.npm.taobao.org แต่ตอนนี้ได้เปลี่ยนเป็น http://registry.npmmirror.com ดูรายละเอียด

แต่การสลับแหล่งที่มาจะยุ่งยากเล็กน้อยอย่างหลีกเลี่ยงไม่ได้โดยการแก้ไขการกำหนดค่า npm เราสามารถติดตั้ง nrm ทั่วโลกเพื่อช่วยให้เราสลับแหล่งที่ npm ได้อย่างรวดเร็ว

ใช้ nrm เพื่อสลับแหล่ง npm อย่างรวดเร็ว

ติดตั้ง nrm ทั่วโลก:

 ติดตั้ง npm -g nrm

ดำเนินการ nrm ls เพื่อ ดูแหล่ง npm ที่สลับได้ :


ใส่คำอธิบายรูปภาพที่นี่


ใช้ npm use เพื่อสลับแหล่งที่มา เช่น เปลี่ยนเป็นแหล่งที่มา Taobao: nrm use taobao


ใส่คำอธิบายรูปภาพที่นี่


ใช้ nrm test 源名เพื่อทดสอบเวลาตอบสนองของแหล่งที่เกี่ยวข้อง:


ใส่คำอธิบายรูปภาพที่นี่


คุณจะเห็นว่าความเร็วในการตอบสนองของแหล่ง Taobao นั้นเร็วกว่าแหล่งที่มาเริ่มต้นของ npm มาก

กระจก npm ภาษาจีน: cnpm

cnpm เป็นมิเรอร์ npmjs.org ที่สมบูรณ์ ซึ่งสามารถใช้ แทนเวอร์ชันอย่างเป็นทางการได้

ความถี่ในการซิงโครไนซ์ระหว่าง cnpm และเวอร์ชันอย่างเป็นทางการคือทุกๆ 10 นาที เว็บไซต์อย่างเป็นทางการของ cnpm

ดาวน์โหลด cnpm :

 ติดตั้ง npm -g cnpm --registry=https://registry.npmmirror.com

cnpm คือ แหล่งที่มาของกระจก Taobao เมื่อเราใช้ แหล่งที่มา ของกระจก Taobao ด้านบน เราเพียงแค่เปลี่ยนแหล่งที่มาของ npm เป็นแหล่งที่มาของกระจก Taobao ( cnpm ) (จริงๆ แล้วแหล่งที่มานี้หมายถึงที่อยู่ของคลังสินค้า) แล้วใช้ผ่าน คำสั่ง npm

และนี่คือการดาวน์โหลด อิมเมจทั้งหมด ของ cnpm โดยตรง จากนั้นคุณสามารถใช้คำสั่ง cnpm แทนคำสั่ง npm :

 cnpm ติดตั้ง cnpm และ axios -g

-

คำแนะนำของ cnpm นั้นเหมือนกับของ npm ทุกประการ เพียงใช้ cnpm แทน npm เมื่อใช้งาน

2. การใช้เส้นด้าย

Yarn เป็นเครื่องมือจัดการการพึ่งพาที่เผยแพร่โดย Facebook ซึ่งเร็วกว่าและมีประสิทธิภาพมากกว่า npm

ติดตั้ง:

 npm ติดตั้งเส้นด้าย -g

อัพเดทเส้นด้าย:

 ชุดไหมพรม เวอร์ชั่นล่าสุด
รุ่นชุดเส้นด้ายจากแหล่งที่มา

ข้อได้เปรียบ

  • เร็วสุด ๆ
    yarn จะแคช แต่ละแพ็คเกจที่ดาวน์โหลดมา ดังนั้นจึงไม่จำเป็นต้องดาวน์โหลดอีกครั้งเมื่อใช้งานอีกครั้ง ยังใช้การดาวน์โหลดแบบขนานเพื่อเพิ่มการใช้ทรัพยากรให้สูงสุด ดังนั้นการติดตั้งจึงเร็วขึ้น

  • ปลอดภัยสุดๆ <br/> ก่อนที่จะรันโค้ด yarn จะตรวจสอบความสมบูรณ์ของแพ็คเกจการติดตั้งแต่ละรายการผ่านอัลกอริธึม

คำแนะนำทั่วไปของเส้นด้าย


ใส่คำอธิบายรูปภาพที่นี่

  • yarn init : เริ่มต้นโปรเจ็กต์และสร้างไฟล์ package.json ขั้นตอนการสร้างจะเหมือนกับ npm init โดยประมาณ

  • yarn help : แสดงรายการคำสั่ง

  • yarn install : ดาวน์โหลดทรัพยากรทั้งหมดที่บันทึกไว้ใน package.json ซึ่งสามารถเรียกย่อว่า yarn

  • yarn add 包名: ดาวน์โหลด แพ็คเกจที่ระบุไปยังไดเร็กทอรีปัจจุบัน

  • yarn remove 包名: ถอนการติดตั้ง แพ็กเกจที่ระบุในไดเร็กทอรีปัจจุบัน

  • yarn upgrade 包名: อัปเดต แพ็กเกจที่ระบุในไดเร็กทอรีปัจจุบัน คุณสามารถเพิ่ม @指定版本号หลังชื่อแพ็กเกจเพื่อระบุเวอร์ชันที่ต้องการอัปเดต

ส่วนต่อท้ายคำสั่ง yarn

  • --dev : ระบุการพึ่งพาใน สภาพแวดล้อมการพัฒนา ( devDependencies ) ย่อว่า -D

  • --peer : ระบุ การพึ่งพาหลัก ( peerDependencies )

  • --optional : ระบุ การพึ่งพาทางเลือก ( optionalDependencies )

บทสรุป

บทความนี้แนะนำ npm และ yarn เช่นเดียวกับ nrm , cnpm ฯลฯ ที่ได้มาจาก npm

บล็อกเกอร์ใช้การผสมผสานระหว่าง npm + nrm เพื่อสลับแหล่งที่มา เนื่องจากไม่เพียงแต่รับประกันความเร็วที่รวดเร็ว แต่ยังช่วยให้สามารถสลับแหล่งที่มาได้อย่างสะดวกโดยไม่ต้องดาวน์โหลดแพ็คเกจเพิ่มเติม เช่น cnpm และ yarn

ทั้ง npm และ yarn มีเนื้อหามากมาย บทความนี้จะอธิบายเฉพาะเนื้อหาที่ใช้บ่อยที่สุดเท่านั้น หากคุณต้องการทราบข้อมูลเพิ่มเติม คุณสามารถไปที่เว็บไซต์อย่างเป็นทางการที่เกี่ยวข้องเพื่อดูได้

บทความที่เกี่ยวข้อง