2016-06-11 6 views
11

मेरे पास एक मीन स्टैक प्रोजेक्ट है जो मूल एनपीएम कमांड का उपयोग करके मचान किया गया था। फिलहाल, बूटस्ट्रैप CDN का उपयोग कर शामिल है:नोड प्रोजेक्ट में बूटस्ट्रैप को कैसे शामिल करता है

link(rel='stylesheet', href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css') 

मेरा प्रश्न कैसे मैं NPM का उपयोग कर बूटस्ट्रैप जोड़ सकते हैं ताकि परियोजना CDN शामिल किए जाने के साथ के रूप में ही काम करता है। विशेष रूप से, जब मैं

npm install bootstrap 

एक बूस्ट्रैप निर्देशिका node_modules के भीतर बनाई गई है। हालांकि, अगर मैं उस निर्देशिका से bootstrap.css को शामिल करने का प्रयास करता हूं, तो यह ग्लाइफ़िकॉन फोंट को तोड़ देता है। क्या कोई इसे सलाह दे सकता है कि इसे कैसे किया जाए?

पीएस मैं AngularJS के बारे में भी यही प्रश्न पूछूंगा।

उत्तर

12

आप यानी bower ब्राउज़र पैकेज प्रबंधक का उपयोग कर सकते

जबकि एक एपीआई के माध्यम से पैकेज निर्भरता मॉडल उजागर

बोवर, सामने के अंत पैकेज प्रबंधन की समस्या के लिए एक सामान्य, unopinionated समाधान उपलब्ध कराता है जो कर सकते हैं एक और अधिक विचार किए गए निर्माण ढेर से खपत हो। कोई सिस्टम व्यापक निर्भरता नहीं है, विभिन्न ऐप्स के बीच कोई निर्भरता साझा नहीं की जाती है, और निर्भरता पेड़ फ्लैट है।

यदि आप अधिक ज्ञान चाहते हैं जिसके बारे में बेहतर और भरोसेमंद है तो आप इसे link भी पढ़ते हैं।

Why Not npm

NPM और बोवर के बीच मुख्य अंतर पैकेज निर्भरता स्थापित करने के लिए दृष्टिकोण है। npm प्रत्येक पैकेज के लिए अलग-अलग निर्भरता स्थापित करता है, और परिणामस्वरूप एक बड़ा पैकेज निर्भरता पेड़ (node_modules/grunt/node_modules/glob/node_modules/...) बनाता है, जहां एक ही पैकेज के कई संस्करण हो सकते हैं। क्लाइंट-साइड जावास्क्रिप्ट के लिए यह अस्वीकार्य है: आप किसी पृष्ठ पर jQuery या किसी अन्य लाइब्रेरी के लिए दो अलग-अलग संस्करण नहीं जोड़ सकते हैं। बोवर के साथ प्रत्येक पैकेज एक बार स्थापित होता है (jQuery हमेशा bower_components/jquery फ़ोल्डर में होगा, इस पर ध्यान दिए बिना कि कितने संकुल इस पर निर्भर करते हैं) और निर्भरता संघर्ष के मामले में, बोवर बस पैकेज को इंस्टॉल नहीं करेगा जो पहले से इंस्टॉल हो चुका है।

बोवर स्थापना

तुम बस सरल संकुल

सिंटेक्स

npm install -g bower 

आप में पूर्ण के लिए Doc उल्लेख कर सकते हैं स्थापित गठन।

उदाहरण के लिए:

निर्देशिका संरचना

project Folder 
    + bower_components 
    + bootstrap 
     + dist 
     + css 
      + bootstrap.css 
    + jquery 
     + jquery.js 
    + public 
    + index.html 
    + app.js 

अब आप app.js में स्थिर पथ सेट कर सकते

app.use(express.static(path.join(__dirname, 'bower_components'))); 

अब आप app.js फ़ाइल के साथ अपने index.html फ़ाइल

<!DOCTYPE html> 
<html> 
<head> 
    <title>{{ title }}</title> 
    <link rel='stylesheet' href='/bootstrap/dist/css/bootstrap.css' /> 
</head> 
<body> 
{{{ yield }}} 
</body> 
<script src="/bootstrap/dist/jquery/jquery.js"></script> 
</html> 

स्क्रीनशॉट

निर्देशिका संरचना में बस का उपयोग कर सकते enter image description here

सामान्य HTML फ़ाइल enter image description here

+0

तो, जब मैं बोवर स्थापित करते हैं, मैं तो संकुल मैं चाहता हूँ इंगित करने के लिए एक bower.json फ़ाइल बनाने की जरूरत है? उसके बाद क्या है? – MadPhysicist

+0

जब आप बूटस्ट्रैप, एंग्लुअर इत्यादि जैसे बाहरी पुस्तकालयों को बोवर इंस्टॉल कर सकते हैं। हाँ, आप bower.json बनाते हैं जो पुस्तकालयों को जब भी चाहें अपडेट करने में मदद कर सकता है। यह फ्रंट एंड समाधान है और इसका उपयोग करना बहुत आसान है। bower.json में पैकेज नाम जोड़ें या बस पैकेज नाम के साथ स्थापित करें। –

+0

मैं अभी भी यह स्पष्ट करने की कोशिश कर रहा हूं कि मेरी HTML फ़ाइल में चीज़ों को कैसे शामिल किया जाए। विशेष रूप से, कैसे बीवर प्रबंधन एनपीएम से अलग होगा? आखिरकार, एनपीएम निर्देशिका और डाउनलोड पैकेज भी बनाता है। – MadPhysicist

संबंधित मुद्दे