Bower และ npm แตกต่างกันอย่างไร

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

ผู้จัดการแพคเกจทั้งหมดมีข้อเสียมากมาย คุณเพียงแค่ต้องเลือกที่คุณสามารถอยู่กับ

ประวัติศาสตร์

NPMเริ่มต้นจากการจัดการโมดูล Node.js (นั่นเป็นเหตุผลที่แพคเกจไปเป็นnode_modulesค่าเริ่มต้น) แต่การทำงานสำหรับ front-end เกินไปเมื่อรวมกับBrowserifyหรือwebpack

Bowerถูกสร้างขึ้นสำหรับ front-end เพียงอย่างเดียวและได้รับการปรับให้เหมาะสมกับที่อยู่ในใจ

ขนาดของ repo

NPM มีขนาดใหญ่กว่าร่มรื่นมากรวมถึง JavaScript country-dataสำหรับวัตถุประสงค์ทั่วไป (เช่นข้อมูลประเทศหรือsortsสำหรับฟังก์ชั่นการเรียงลำดับที่สามารถใช้งานได้ที่ส่วนหน้าหรือปลายด้านหลัง)

Bower มีแพ็คเกจจำนวนน้อยกว่ามาก

การจัดการรูปแบบอื่น ๆ

ซุ้มรวมถึงรูปแบบอื่น ๆ

npm ให้ความสำคัญกับ JavaScript ลักษณะจะถูกดาวน์โหลดแยกต่างหากหรือต้องการโดยบางสิ่งเช่นnpm-sassหรือsass-npmหรือ

การจัดการการพึ่งพา

ความแตกต่างที่ใหญ่ที่สุดคือ NPM ที่ไม่อ้างอิงที่ซ้อนกัน ( แต่จะแบนโดยค่าเริ่มต้น) ในขณะที่ชั้นต้องใช้ต้นไม้พึ่งพาแบน(ทำให้ภาระของการแก้ปัญหาการพึ่งพาผู้ใช้)

ต้นไม้พึ่งพาอาศัยแบบซ้อนหมายความว่าการพึ่งพาของคุณสามารถมีการพึ่งพาของตนเองซึ่งสามารถมีการพึ่งพาของตนเองและอื่น ๆ สิ่งนี้อนุญาตให้สองโมดูลต้องการเวอร์ชันที่ต่างกันของการพึ่งพาเดียวกันและยังคงใช้งานได้ หมายเหตุตั้งแต่ npm v3 ต้นไม้ที่ขึ้นต่อกันจะแบนตามค่าเริ่มต้น (ประหยัดพื้นที่) และทำรังเฉพาะเมื่อจำเป็นเช่นถ้าสองการขึ้นต่อกันจำเป็นต้องใช้เวอร์ชัน Underscore ของตนเอง

บางโครงการใช้ทั้งสองอย่างคือพวกเขาใช้ Bower สำหรับแพ็คเกจ front-end และ npm สำหรับเครื่องมือสำหรับนักพัฒนาอย่าง Yeoman, Grunt, Gulp, JSHint, CoffeeScript เป็นต้น

ทรัพยากร

• การพึ่งพาที่ซ้อนกัน - เข้าใจว่าทำไม node_modules ทำงานในแบบที่มันทำ

คำตอบนี้เป็นส่วนเพิ่มเติมของคำตอบของ Sindre Sorhus ความแตกต่างที่สำคัญระหว่าง npm และ Bower เป็นวิธีที่พวกเขาปฏิบัติต่อการอ้างอิงซ้ำ โปรดทราบว่าสามารถใช้ร่วมกันในโครงการเดียว

คำถามที่พบบ่อยเกี่ยวกับnpm : (ลิงก์ archive.org จาก 6 ก.ย. 2558)

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

บนหน้าแรกของBower :

Bower ได้รับการปรับให้เหมาะสมสำหรับ Front-end Bower ใช้แผนผังการพึ่งพาอาศัยแบบแบนซึ่งต้องการเพียงเวอร์ชันเดียวสำหรับแต่ละแพ็คเกจลดการโหลดหน้าเว็บให้เหลือน้อยที่สุด

ในระยะสั้น npm มีจุดมุ่งหมายเพื่อความมั่นคง Bower มีวัตถุประสงค์เพื่อโหลดทรัพยากรน้อยที่สุด หากคุณวาดโครงสร้างการพึ่งพาคุณจะเห็นสิ่งนี้:

NPM:

project root
[node_modules] // default directory for dependencies
 -> dependency A
 -> dependency B
    [node_modules]
    -> dependency A

 -> dependency C
    [node_modules]
    -> dependency B
      [node_modules]
       -> dependency A 
    -> dependency D

ตามที่คุณเห็นมันติดตั้งการอ้างอิงบางอย่างซ้ำ ๆ การพึ่งพา A มีสามอินสแตนซ์ที่ติดตั้ง!

ซุ้ม:

project root
[bower_components] // default directory for dependencies
 -> dependency A
 -> dependency B // needs A
 -> dependency C // needs B and D
 -> dependency D

ที่นี่คุณจะเห็นว่าการพึ่งพาที่ไม่ซ้ำกันทั้งหมดอยู่ในระดับเดียวกัน

ดังนั้นทำไมต้องใช้ NPM

บางทีการพึ่งพา B ต้องใช้เวอร์ชันที่แตกต่างกันของการพึ่งพา A มากกว่าการพึ่งพา C. npm ติดตั้งทั้งสองเวอร์ชันของการพึ่งพานี้ดังนั้นจึงจะทำงานได้ แต่ Bower จะทำให้คุณมีความขัดแย้งเพราะไม่ชอบการทำซ้ำ (เนื่องจากการโหลดทรัพยากรเดียวกันบนเว็บเพจ ไม่มีประสิทธิภาพและค่าใช้จ่ายสูง คุณจะต้องเลือกเวอร์ชันที่คุณต้องการติดตั้งด้วยตนเอง สิ่งนี้อาจมีผลกระทบที่การอ้างอิงอย่างใดอย่างหนึ่งจะแตกหัก แต่นั่นเป็นสิ่งที่คุณจะต้องแก้ไขต่อไป

ดังนั้นการใช้งานทั่วไปคือ Bower สำหรับแพ็คเกจที่คุณต้องการเผยแพร่บนหน้าเว็บของคุณ (เช่นรันไทม์ที่คุณหลีกเลี่ยงการทำซ้ำ) และใช้ npm สำหรับสิ่งอื่น ๆ เช่นการทดสอบการสร้างการเพิ่มประสิทธิภาพการตรวจสอบและอื่น ๆ (เช่นเวลาพัฒนาซึ่งการทำซ้ำนั้นมีความกังวลน้อยกว่า)

อัปเดตสำหรับ npm 3:

npm 3 ยังทำสิ่งต่าง ๆ เมื่อเทียบกับ Bower มันจะติดตั้งการพึ่งพาทั่วโลก แต่เฉพาะสำหรับรุ่นแรกที่พบ เวอร์ชันอื่นถูกติดตั้งในแผนผัง (โมดูลพาเรนต์จากนั้น node_modules)

• [node_modules]
  • dep A v1.0
  • dep B v1.0
    • dep A v1.0 (ใช้รุ่นรูท)
  • dep C v1.0
    • dep A v2.0 (เวอร์ชั่นนี้แตกต่างจากเวอร์ชั่นรูทดังนั้นมันจะเป็นการติดตั้งแบบซ้อนกัน)

สำหรับข้อมูลเพิ่มเติมฉันแนะนำให้อ่านเอกสารของ npm 3

TL; DR: ความแตกต่างที่ยิ่งใหญ่ที่สุดในการใช้ชีวิตประจำวันไม่ใช่การพึ่งพาซ้อนกัน ... มันเป็นความแตกต่างระหว่างโมดูลและกลม

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

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

แต่ความแตกต่างของโมดูลนี้กับดาวฤกษ์ (หรือโมดูลกับ 'สคริปต์') อาจเป็นความแตกต่างที่สำคัญที่สุดระหว่าง Bower และ npm วิธีการที่ npm ของการใส่ทุกอย่างในโมดูลต้องการให้คุณเปลี่ยนวิธีที่คุณเขียนจาวาสคริปต์สำหรับเบราว์เซอร์เกือบจะดีขึ้นอย่างแน่นอน

The Bower Approach: ทรัพยากรทั่วโลก, Like <script> Tags

ที่ root, Bower เป็นเรื่องเกี่ยวกับการโหลดไฟล์สคริปต์แบบเก่า ไฟล์ใดก็ตามที่มีไฟล์สคริปต์ Bower จะโหลดไฟล์เหล่านั้น ซึ่งโดยทั่วไปหมายความว่า Bower นั้นเหมือนกับการรวมสคริปต์ของคุณทั้งหมดในแบบธรรมดา<script>ใน<head>HTML ของคุณ

ดังนั้นวิธีการพื้นฐานแบบเดียวกับที่คุณคุ้นเคย แต่คุณจะได้รับความสะดวกด้านระบบอัตโนมัติที่ดี:

• คุณเคยจำเป็นต้องรวมการพึ่งพา JS ใน repo โครงการของคุณ (ในขณะที่พัฒนา) หรือรับพวกเขาผ่าน CDN ตอนนี้คุณสามารถข้ามน้ำหนักการดาวน์โหลดพิเศษใน repo และใครบางคนสามารถทำbower installสิ่งที่พวกเขาต้องการได้อย่างรวดเร็วและในทันที
• หากการพึ่งพา Bower ระบุการพึ่งพาของตัวเองในbower.jsonนั้นการดาวน์โหลดเหล่านั้นจะถูกดาวน์โหลดให้คุณเช่นกัน

แต่นอกเหนือจากนั้นBower ไม่เปลี่ยนแปลงวิธีการที่เราเขียนจาวาสคริปต์ ไม่มีอะไรเกี่ยวกับสิ่งที่อยู่ภายในไฟล์ที่โหลดโดย Bower จำเป็นต้องเปลี่ยนเลย โดยเฉพาะอย่างยิ่งนี่หมายความว่าทรัพยากรที่มีให้ในสคริปต์ที่โหลดโดย Bower จะยังคงถูกกำหนดเป็นตัวแปรทั่วโลกซึ่งมีอยู่ในทุกที่ในบริบทการทำงานของเบราว์เซอร์ที่โหลด (โดยปกติ แต่ไม่เสมอไป)

วิธีการ npm: โมดูล JS ทั่วไปการฉีดการพึ่งพาอย่างชัดเจน

โค้ดทั้งหมดในโหนดโหนด (และโค้ดทั้งหมดโหลดผ่าน npm) มีโครงสร้างเป็นโมดูล (โดยเฉพาะเป็นการใช้งานรูปแบบโมดูล CommonJSหรือตอนนี้เป็นโมดูล ES6) ดังนั้นหากคุณใช้ NPM เพื่อจัดการการพึ่งพาด้านเบราว์เซอร์ (ผ่าน Browserify หรืออย่างอื่นที่ทำงานเดียวกัน) คุณจะจัดโครงสร้างโค้ดของคุณในลักษณะเดียวกับที่โหนดทำ

ผู้คนที่ฉลาดกว่าที่ฉันเคยจัดการกับคำถาม 'ทำไมต้องเป็นโมดูล' แต่นี่เป็นบทสรุปของแคปซูล:

• สิ่งใดภายในโมดูลมีประสิทธิภาพnamespacedซึ่งหมายความว่ามันไม่ได้เป็นตัวแปรใด ๆ ทั่วโลกมากขึ้นและคุณไม่สามารถตั้งใจอ้างอิงโดยไม่ได้ตั้งใจที่จะ
• สิ่งใดในโมดูลจะต้องถูกแทรกเข้าไปในบริบทเฉพาะ (โดยปกติคือโมดูลอื่น) เพื่อใช้ประโยชน์จากมัน
• ซึ่งหมายความว่าคุณสามารถมีการพึ่งพาภายนอกหลายรุ่นเดียวกัน (lodash สมมติว่า) ในส่วนต่าง ๆ ของแอปพลิเคชันของคุณและพวกเขาจะไม่ชน / ขัดแย้ง (สิ่งนี้เกิดขึ้นบ่อยครั้งอย่างน่าประหลาดใจเนื่องจากรหัสของคุณต้องการใช้การพึ่งพาหนึ่งเวอร์ชัน แต่การอ้างอิงภายนอกของคุณระบุการขัดแย้งที่อื่น
• เนื่องจากการพึ่งพาทั้งหมดจะถูกฉีดเข้าไปในโมดูลใดโมดูลหนึ่งด้วยตนเองจึงเป็นเรื่องง่ายที่จะให้เหตุผลกับพวกเขา คุณรู้จริง: "รหัสเดียวที่ฉันต้องพิจารณาเมื่อทำงานนี้คือสิ่งที่ฉันได้เลือกที่จะฉีดที่นี่โดยเจตนา" "รหัสเดียวที่ฉันจะต้องพิจารณาเมื่อทำงานเกี่ยวกับเรื่องนี้คือสิ่งที่ฉันได้เลือกจงใจที่จะฉีดที่นี่"
• เนื่องจากแม้แต่เนื้อหาของโมดูลฉีดก็ถูกห่อหุ้มอยู่หลังตัวแปรที่คุณกำหนดให้และโค้ดทั้งหมดจะทำงานภายในขอบเขตที่ จำกัด ความประหลาดใจและการชนกลายเป็นสิ่งที่ไม่น่าจะเป็นไปได้ มีโอกาสน้อยมากที่บางสิ่งจากการอ้างอิงของคุณจะกำหนดตัวแปรส่วนกลางโดยไม่ตั้งใจโดยที่คุณไม่รู้ตัวหรือไม่ว่าคุณจะทำเช่นนั้น ( อาจเกิดขึ้นได้ แต่โดยปกติคุณต้องออกไปทำสิ่งต่าง ๆ เช่นwindow.variableอุบัติเหตุที่ยังมีแนวโน้มเกิดขึ้นคือการมอบหมายthis.variableไม่ใช่ตระหนักว่าthisเป็นจริงwindowในบริบทปัจจุบัน)
• เมื่อคุณต้องการทดสอบแต่ละโมดูลคุณจะสามารถรู้ได้อย่างง่ายดายมาก: อะไรคือสิ่งที่ (การอ้างอิง) มีผลกับโค้ดที่ทำงานภายในโมดูล และเนื่องจากคุณฉีดทุกอย่างอย่างชัดเจนคุณสามารถเยาะเย้ยการพึ่งพาเหล่านั้นได้อย่างง่ายดาย

สำหรับฉันแล้วการใช้โมดูลสำหรับโค้ดส่วนหน้าทำให้: การทำงานในบริบทที่แคบกว่ามากซึ่งง่ายต่อการให้เหตุผลและทดสอบและมีความมั่นใจมากขึ้นเกี่ยวกับสิ่งที่เกิดขึ้น

ใช้เวลาประมาณ 30 วินาทีในการเรียนรู้วิธีใช้ไวยากรณ์โมดูล CommonJS / Node ภายในไฟล์ JS ที่กำหนดซึ่งจะเป็นโมดูลคุณต้องประกาศการพึ่งพาภายนอกใด ๆ ที่คุณต้องการใช้เช่นนี้:

var React = require('react');

ภายในไฟล์ / โมดูลคุณทำสิ่งที่คุณทำตามปกติและสร้างวัตถุหรือฟังก์ชั่นที่คุณต้องการให้ผู้ใช้ภายนอกเรียกมัน myModuleโมดูลคุณทำสิ่งที่คุณทำตามปกติและสร้างวัตถุบางอย่างหรือฟังก์ชั่นที่คุณจะต้องการที่จะเปิดเผยให้กับผู้ใช้งานข้างนอกอาจจะเรียกมันว่า

ในตอนท้ายของไฟล์คุณจะส่งออกสิ่งที่คุณต้องการแบ่งปันกับคนทั่วโลกเช่นนี้

module.exports = myModule;

จากนั้นในการใช้เวิร์กโฟลว์ที่ใช้ CommonJS ในเบราว์เซอร์คุณจะต้องใช้เครื่องมือเช่น Browserify เพื่อดึงไฟล์โมดูลเหล่านั้นทั้งหมดรวมเนื้อหาของพวกเขาตอนรันไทม์และฉีดเข้าด้วยกันตามต้องการ

และเนื่องจากโมดูล ES6 (ซึ่งคุณน่าจะ transpile ไปยัง ES5 กับ Babel หรือคล้ายกัน) ได้รับการยอมรับอย่างกว้างขวางและทำงานได้ทั้งในเบราว์เซอร์หรือใน Node 4.0 เราควรพูดถึงภาพรวมที่ดีของเหล่านั้นเช่นกัน

เพิ่มเติมเกี่ยวกับรูปแบบการทำงานกับโมดูลในเด็คนี้

EDIT (ก.พ. 2017): Yarnของ Facebook เป็นสิ่งสำคัญสำหรับทดแทน / เสริมที่มีศักยภาพสำหรับ npm ในวันนี้: รวดเร็วการจัดการแพคเกจออฟไลน์ที่รวดเร็วกำหนดและสร้างสิ่งที่ npm ให้คุณ มันคุ้มค่าที่จะดูโครงการ JS ใด ๆ โดยเฉพาะอย่างยิ่งเนื่องจากง่ายต่อการสลับเข้า / ออก

แก้ไข (พฤษภาคม 2019) "ในที่สุด Bower ถูกคัดค้านในตอนท้ายของเรื่อง" (h / t: @DanDascalescu ด้านล่างสำหรับสรุปสาระสำคัญ)

และในขณะที่ Yarn ยังคงทำงานอยู่แรงผลักดันมากมายสำหรับมันก็เปลี่ยนกลับไปเป็น npm เมื่อมีการใช้คุณสมบัติหลักของเส้นด้าย

อัพเดต 2017- ต.ค.

ซุ้มที่สุดก็ได้รับการเลิกใช้ ตอนจบของเรื่อง.

คำตอบที่เก่ากว่า

จาก Mattias Petter Johansson ผู้พัฒนา JavaScript ที่ Spotify :

ในเกือบทุกกรณีควรใช้ Browserify และ npm มากกว่า Bower มันเป็นเพียงโซลูชันบรรจุภัณฑ์ที่ดีกว่าสำหรับแอพพลิเคชั่นส่วนหน้ามากกว่า Bower ที่ Spotify เราใช้ npm เพื่อทำแพ็กเกจโมดูลเว็บทั้งหมด (html, css, js) และใช้งานได้ดีมาก

แบรนด์ Bower เองเป็นผู้จัดการแพ็คเกจสำหรับเว็บ มันจะยอดเยี่ยมถ้ามันเป็นจริง - ผู้จัดการแพ็คเกจที่ทำให้ชีวิตของฉันดีขึ้นเพราะนักพัฒนาส่วนหน้าจะยอดเยี่ยม ปัญหาคือ Bower ไม่มีเครื่องมือพิเศษสำหรับจุดประสงค์ มันไม่มีเครื่องมือที่ฉันรู้ว่า npm นั้นไม่ได้และโดยเฉพาะอย่างยิ่งไม่มีประโยชน์สำหรับนักพัฒนาส่วนหน้า ไม่มีประโยชน์ใด ๆ เลยสำหรับผู้พัฒนาส่วนหน้าในการใช้ Bower ในช่วง npm

เราควรหยุดใช้ bower และรวมประมาณ npm โชคดีที่นั่นคือสิ่งที่เกิดขึ้น :

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

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

(โปรดทราบว่าWebpackและrollupได้รับการยอมรับอย่างกว้างขวางว่าดีกว่า Browserify ในเดือนสิงหาคม 2559)

Bower บำรุงรักษาโมดูลรุ่นเดียวมันจะพยายามช่วยคุณเลือกที่ถูกต้อง / ดีที่สุดสำหรับคุณเท่านั้น

การจัดการการพึ่งพา Javascript: npm vs bower vs volo?

NPM ดีกว่าสำหรับโมดูลโหนดเนื่องจากมีระบบโมดูลและคุณทำงานในพื้นที่ Bower เป็นสิ่งที่ดีสำหรับเบราว์เซอร์เพราะปัจจุบันมีเพียงขอบเขตทั่วโลกและคุณต้องการเลือกรุ่นที่คุณทำงานด้วย

ทีมของฉันย้ายออกจาก Bower และย้ายไปที่ npm เพราะ:

• การใช้งานแบบเป็นโปรแกรมนั้นเจ็บปวด
• อินเทอร์เฟซของ Bower เปลี่ยนไปเรื่อย ๆ
• คุณลักษณะบางอย่างเช่นชวเลขย่อ URL นั้นใช้งานไม่ได้
• การใช้ Bower และ npm ในโครงการเดียวกันนั้นเจ็บปวด
• การรักษาฟิลด์รุ่น bower.json ให้ตรงกับแท็ก git นั้นเจ็บปวด
• การควบคุมแหล่งที่มา! = การจัดการแพ็คเกจ
• การสนับสนุน CommonJS ไม่ตรงไปตรงมา

สำหรับรายละเอียดเพิ่มเติมโปรดดูที่"ทำไมใช้ทีมงานของฉัน NPM แทนซุ้ม"

พบคำอธิบายที่มีประโยชน์นี้จากhttp://ng-learn.org/2013/11/Bower-vs-npm/

ในหนึ่งมือ npm ถูกสร้างขึ้นเพื่อติดตั้งโมดูลที่ใช้ในสภาพแวดล้อม node.js หรือเครื่องมือในการพัฒนาที่สร้างขึ้นโดยใช้ node.js เช่น Karma, lint, minifiers และอื่น ๆ npm สามารถติดตั้งโมดูลแบบโลคัลในโครงการ (โดยค่าเริ่มต้นใน node_modules) หรือแบบโกลบอลเพื่อใช้โดยหลายโปรเจ็กต์ ในโครงการขนาดใหญ่วิธีการระบุการขึ้นต่อกันคือการสร้างไฟล์ชื่อ package.json ซึ่งมีรายการการขึ้นต่อกัน รายการดังกล่าวจะได้รับการรับรู้โดย npm เมื่อคุณเรียกใช้การติดตั้ง npm จากนั้นดาวน์โหลดและติดตั้งให้คุณ

ในอีกด้านหนึ่งถูกสร้างขึ้นเพื่อจัดการการพึ่งพาส่วนหน้าของคุณ ไลบรารี่เช่น jQuery, AngularJS, ขีดล่างเป็นต้นคล้ายกับ npm ซึ่งมีไฟล์ที่คุณสามารถระบุรายการของการอ้างอิงที่เรียกว่า bower.json ในกรณีนี้การติดตั้ง frontend ของคุณจะถูกติดตั้งโดยการเรียกใช้ bower install ซึ่งโดยปกติจะติดตั้งไว้ในโฟลเดอร์ที่เรียกว่า bower_components

อย่างที่คุณเห็นแม้ว่าพวกเขาจะทำงานคล้ายกัน แต่พวกเขาถูกกำหนดเป้าหมายไปยังชุดของไลบรารีที่แตกต่างกันมาก

สำหรับคนจำนวนมากที่ทำงานกับ node.js ประโยชน์ที่สำคัญของ bower คือการจัดการการพึ่งพาที่ไม่ใช่ javascript เลย หากพวกเขากำลังทำงานกับภาษาที่รวบรวมเป็นจาวาสคริปต์สามารถใช้ npm เพื่อจัดการการอ้างอิงบางส่วนของพวกเขา อย่างไรก็ตามการขึ้นต่อกันของมันทั้งหมดจะไม่เป็นโมดูล node.js บางคนที่รวบรวมไปยังจาวาสคริปต์อาจมีภาษาแปลก ๆ เฉพาะ mangling ที่ทำให้พวกเขาผ่านการรวบรวมเพื่อจาวาสคริปต์ตัวเลือกที่ไม่เหมาะสมเมื่อผู้ใช้คาดหวังรหัสแหล่งที่มา

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