ग्रंट, एनपीएम और बोवर के बीच अंतर (पैकेज.जसन बनाम बोवर.जसन)


612

मैं npm और बोवर का उपयोग करने के लिए नया हूं, emberjs में अपना पहला ऐप बना रहा हूं :)।
मेरे पास रेल के साथ थोड़ा अनुभव है, इसलिए मैं निर्भरता लिस्टिंग के लिए फाइलों के विचार से परिचित हूं (जैसे बंडल जेमफाइल)

प्रश्न: जब मैं एक पैकेज जोड़ना चाहता हूं (और गिट में निर्भरता की जांच कर रहा हूं), यह कहां से package.jsonया में है bower.json?

जो मैं इकट्ठा करता हूं, उससे
चलने bower installसे पैकेज मिलेगा और इसे /vendorनिर्देशिका में रखा जाएगा , इसे
चलाने से npm installयह प्राप्त होगा और इसे /node_modulesनिर्देशिका में डाल दिया जाएगा ।

यह SO उत्तर कहता है कि बोवर फ्रंट-एंड के लिए है और npm बैकएंड सामान के लिए है।
एम्बर-ऐप-किट पहली नज़र से इस भेद का पालन करता है ... लेकिन कुछ कार्यक्षमता को सक्षम करने के लिए ग्रंटफाइल में निर्देश दो स्पष्ट आदेश देते हैं, इसलिए मैं यहां पूरी तरह से भ्रमित हूं।

सहज रूप से मुझे लगता है कि होगा

  1. npm install --save-dev package-name मेरे पैकेज के लिए पैकेज-नाम जोड़ने के बराबर होगा। json

  2. bower install - save पैकेज-नाम मेरे bower.json को पैकेज जोड़ने और bower इंस्टॉल चलाने के समान हो सकता है ?

अगर ऐसा है, तो मुझे कभी भी पैकेज को स्पष्ट रूप से इस तरह से स्थापित करना चाहिए कि बिना उन्हें फाइल को जोड़े बिना जो निर्भरता का प्रबंधन करता है (इसके अलावा विश्व स्तर पर कमांड लाइन टूल स्थापित करने से)?



14
@SindreSorhus यह सटीक डुप्लिकेट नहीं है। इस पोस्ट में अतिरिक्त प्रश्न भी जुड़े हुए हैं। BTW क्या आप नीचे बताए मन को समझाते हैं?
sachinjain024

1
क्या आपने स्वीकार किए गए उत्तर को बदल दिया? ऐसा लगता है कि 2014 से बहुत ऊपर चढ़ा हुआ एक 2016 से स्वीकृत एक की तुलना में काफी अलग है। यह भी बताता है कि यह एक और दृष्टिकोण क्यों सुझाता है, इसलिए मैं इसके साथ शांत हूं। बस थोड़ा सा आश्चर्य हुआ कि यह स्वीकार कर लिया गया है (या फिर से स्वीकार किया गया है)।

1
हां, मैंने स्वीकार किए गए उत्तर को बदल दिया क्योंकि मुझे लगता है कि बाद में एक बहुत अधिक प्रासंगिक है। मुझे लगता है कि इस फ्रंट-एंड जंगल में कई लोग उतने ही भ्रमित हैं जितना कि मैं था, इसलिए इस सवाल ने मेरी उम्मीदों से परे लोकप्रियता हासिल की ... और अभी भी 2 साल बाद विचार मिलते हैं। पावेल के लिए धन्यवाद अब लोगों को संदर्भित करने के लिए एक अधिक वर्तमान उत्तर है (fwiw मैं अपनी वर्तमान नौकरी में वेबपैक का उपयोग कर रहा हूं)।
अपरेंटिसडेव

जवाबों:


154

2016 मध्य के लिए अद्यतन :

चीजें इतनी तेजी से बदल रही हैं कि अगर 2017 के अंत में यह उत्तर अब तक नहीं हो सकता है!

शुरुआती लोग जल्दी से निर्माण उपकरण और वर्कफ़्लोज़ के विकल्प में खो सकते हैं, लेकिन 2016 में जो सबसे अधिक हो रहा है वह बोवर, ग्रंट या गुलप का उपयोग नहीं कर रहा है! वेबपैक की मदद से आप एनपीएम में सब कुछ सीधे कर सकते हैं!

मुझे गलत मत समझो लोग अन्य वर्कफ़्लोज़ का उपयोग करते हैं और मैं अभी भी अपने विरासत प्रोजेक्ट में GULP का उपयोग करता हूं (लेकिन धीरे-धीरे इससे बाहर निकल रहा हूं), लेकिन यह इस तरह से सबसे अच्छी कंपनियों और डेवलपर्स में किया जाता है जो इस वर्कफ़्लो में बहुत सारे पैसे कमाते हैं!

इस टेम्प्लेट को देखें यह एक बहुत अद्यतित सेटअप है जिसमें सर्वश्रेष्ठ और नवीनतम तकनीकों का मिश्रण है: https://github.com/coryhouse/react-slingshot

  • Webpack
  • एनपीएम एक बिल्ड टूल के रूप में (कोई गल्प, ग्रंट या बोवर नहीं)
  • Redux के साथ प्रतिक्रिया
  • ESLint
  • सूची लंबी है। जाओ और अन्वेषण करो!

आपके सवाल:

जब मैं एक पैकेज जोड़ना चाहता हूं (और git में निर्भरता की जांच करता हूं), यह कहां से है - पैकेज में। json या bower.json में

  • सब कुछ पैकेज में है

  • निर्माण के लिए आवश्यक निर्भरता "भक्ति पर निर्भरता" में होती है npm install require-dir --save-dev(यानी- dev-dev अपने पैकेज को अद्यतन करता है। भक्ति पर निर्भरता में एक प्रविष्टि जोड़कर)

  • रनटाइम के दौरान आपके आवेदन के लिए आवश्यक निर्भरता "निर्भरता" में होती है npm install lodash --save(- (निर्भरता के लिए एक प्रविष्टि जोड़कर अपने पैकेज को अद्यतन करता है)।

अगर ऐसा है, तो मुझे कभी भी पैकेज को स्पष्ट रूप से इस तरह से स्थापित करना चाहिए कि बिना उन्हें फाइल को जोड़े बिना जो निर्भरता का प्रबंधन करता है (इसके अलावा विश्व स्तर पर कमांड लाइन टूल स्थापित करने से)?

हमेशा । सिर्फ आराम की वजह से। जब आप एक ध्वज ( --save-devया --save) जोड़ते हैं जो फ़ाइल deps (package.json) को प्रबंधित करती है तो स्वचालित रूप से अपडेट हो जाती है। मैन्युअल रूप से इसमें निर्भरता संपादित करके समय बर्बाद न करें। के लिए शॉर्टकट npm install --save-dev package-nameहै npm i -D package-nameऔर शॉर्टकट npm install --save package-nameहैnpm i -S package-name


6
आपका उत्तर बहुत स्पष्ट है:> With help of Webpack you can do everything directly in NPM! यह सच नहीं है, किसी को भी अपने वर्कफ़्लो में
वेबपैक की

26
यह जवाब बहुत सारी धारणाएं बना रहा है। प्रश्न एनपीएम और बोवर के बीच अंतर पूछ रहा है, और यह उत्तर किसी कारण से वेबपैक का उल्लेख कर रहा है। हां, वेबपैक इसे करने का एक तरीका है, लेकिन यह उत्तर ऐसा प्रतीत कर रहा है कि यह ऐसा करने का एकमात्र और सही तरीका है। एक उदाहरण के लिए, यदि कोई पॉलिमर 1.x के साथ काम कर रहा है, तो मानक वर्कफ़्लो बोवर का उपयोग करेगा, और वेबपैक के लिए बहुत समर्थन नहीं है।
जॉन पॉवर्स

1
उत्तर वास्तव में प्रासंगिक है, लेकिन तर्क वास्तव में नहीं दिया गया है: "लेकिन यह है कि यह कैसे किया जाता है" - ठीक है, कुछ भी नहीं किया जाना चाहिए क्योंकि यह प्रतीत होता है कि किया जाना चाहिए (यानी दूसरों द्वारा किया जाता है)। वर्कफ़्लो के लिए धन का तर्क से कोई लेना-देना नहीं है।
फोर्बर्ग

3
2017 में इस उत्तर को देखते हुए। प्रलेखन पर जा रहे हैं: "वेबपैक v1 को हटा दिया गया है। हम सभी डेवलपर्स को वेबपैक पर अपग्रेड करने के लिए प्रोत्साहित करते हैं। हमारे माइग्रेशन गाइड का पालन करें या अधिक जानकारी के लिए वेबपैक 2 प्रलेखन देखें।" Haha क्लासिक वेब विकास।
user643011

1
@ user643011 जब आप माइग्रेशन गाइड को देखते हैं तो आप देखेंगे कि अधिकांश कॉन्फिगरेशन एक जैसे हैं और बाकी कॉनफिगरेशन स्ट्रक्चर में सिर्फ कॉस्मेटिक बदलाव हैं। मैंने एक दोपहर में पीआर
पावेल

576

Npm और Bower दोनों निर्भरता प्रबंधन उपकरण हैं। लेकिन दोनों के बीच मुख्य अंतर npm है जिसका उपयोग नोड js मॉड्यूल को स्थापित करने के लिए किया जाता है, लेकिन bower js का उपयोग html, css, js आदि जैसे फ्रंट एंड घटकों के प्रबंधन के लिए किया जाता है

एक तथ्य जो इसे और अधिक भ्रामक बनाता है वह यह है कि npm कुछ पैकेज प्रदान करता है जिनका उपयोग फ्रंट-एंड डेवलपमेंट के साथ-साथ gruntऔर जैसे भी किया जा सकता है jshint

ये पंक्तियाँ अधिक अर्थ जोड़ती हैं

Bpm, npm के विपरीत, कई फाइलें हो सकती हैं (जैसे .js, .css, .html, .png, .ttf) जिन्हें मुख्य फ़ाइल माना जाता है। शब्दार्थ इन मुख्य फाइलों पर विचार करता है, जब एक साथ पैक किया जाता है, एक घटक।

संपादित करें : ग्रंट NPM और बोवर से काफी अलग है। ग्रंट एक जावास्क्रिप्ट कार्य धावक उपकरण है। आप ग्रंट का उपयोग करके बहुत सी चीजें कर सकते हैं जो आपको मैन्युअल रूप से करना था अन्यथा नहीं। ग्रंट के कुछ उपयोगों पर प्रकाश डालना:

  1. कुछ फ़ाइलों को ज़िप करना (जैसे zipup plugin)
  2. Js फाइलों पर लाइनिंग (jshint)
  3. कम फ़ाइलें संकलित करना (ग्रंट-कॉन्ट्रिब-कम)

सास संकलन के लिए ग्रंट प्लगइन्स हैं, आपकी जावास्क्रिप्ट को कॉपी करना, फ़ाइलों / फ़ोल्डरों को कॉपी करना, जावास्क्रिप्ट मोड को छोटा करना आदि।

कृपया ध्यान दें कि ग्रन्ट प्लगइन एक npm पैकेज भी है।

प्रश्न 1

जब मैं एक पैकेज जोड़ना चाहता हूं (और git में निर्भरता की जांच करता हूं), यह कहां से है - पैकेज में। json या bower.json में

यह वास्तव में निर्भर करता है कि यह पैकेज कहां का है। यदि यह एक नोड मॉड्यूल (जैसे कि ग्रंट, अनुरोध) है, तो यह पैकेज में जाएगा। अन्यथा बायसन जौन में।

प्रश्न 2

मुझे कभी भी पैकेजों को स्पष्ट रूप से इस तरह स्थापित करना चाहिए कि उन्हें निर्भरता का प्रबंधन करने वाली फ़ाइल में शामिल किए बिना

इससे कोई फर्क नहीं पड़ता कि आप संकुल को स्पष्ट रूप से स्थापित कर रहे हैं या .json फ़ाइल में निर्भरता का उल्लेख कर रहे हैं। मान लीजिए कि आप एक नोड प्रोजेक्ट पर काम करने के बीच में हैं और आपको एक और प्रोजेक्ट की जरूरत है, कहते हैं request, तो आपके पास दो विकल्प हैं:

  • Package.json फ़ाइल संपादित करें और 'अनुरोध' पर निर्भरता जोड़ें
  • npm स्थापित करें

या

  • कमांडलाइन का उपयोग करें: npm install --save request

--saveविकल्प पैकेज के लिए निर्भरता जोड़ता है। फ़ाइल के रूप में भी। यदि आप --saveविकल्प निर्दिष्ट नहीं करते हैं , तो यह केवल पैकेज डाउनलोड करेगा लेकिन json फ़ाइल अप्रभावित रहेगी।

आप इसे किसी भी तरह से कर सकते हैं, पर्याप्त अंतर नहीं होगा।


3
स्पष्टीकरण के लिए धन्यवाद, और लेख के लिए! व्यावहारिक, और अंतर को स्पष्ट करता है (जो यह तय करने में मदद करे कि निर्भरता कहाँ रखी जाए)। मैं इंतजार करूंगा कि शायद कोई आखिरी सवाल पर फिर से झंकार करेगा (फिर: कब मैं व्यक्तिगत रूप से पैकेज स्थापित करना चाहता हूं), और बाद में अपना जवाब स्वीकार करूंगा :)
अपरेंटिसडेव

1
Npm के बारे में, यह NodeJS मॉड्यूल के लिए एक पैकेज मैनेजर हो सकता है, लेकिन हम दृष्टि खो रहे हैं कि यह केवल NodeJS के लिए अनन्य नहीं है। npm क्लाइंट-साइड निर्भरता के प्रभावी प्रबंधन के समान है। Ex: NOTkry.com/posts/code/use-npm-on-the-client-side.html
मैट स्मिथ

15
क्या कर सकता है कि npm नहीं कर सकता?
एडम सोफ़र

1
ध्यान दें कि jQuery प्लगइन रिपॉजिटरी ( plugins.jquery.com ) को npm से बदल दिया गया है।
प्रात:

2
नवीनतम क्विकार्टार्ट कोणीय 2 (आरसी) ट्यूटोरियल और जीआईटी बीज का उपयोग npmकेवल उसी प्रकार किया जाता है, जैसे कि एन v1 और बोवर दोनों का उपयोग करने वाले v1 ट्यूटोरियल के विपरीत। मैं वास्तव में, वास्तव में तथ्यों से प्यार करता हूं कि (ए) package.jsonको बनाए रखने के लिए केवल एक चीज है, (बी) कि यह एक लाइनर में निर्भरता की गणना करता है npm install, और (सी) जब कोई समस्या है तो आपको केवल node_modulesफ़ोल्डर को हटाने और एनपीएम चलाने की आवश्यकता है फिर।
सेबास
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.