प्रश्न 1:
वास्तव में n n के माध्यम से ट्विटर बूटस्ट्रैप को स्थापित करने का उद्देश्य क्या है? मुझे लगा कि npm सर्वर साइड मॉड्यूल के लिए था। क्या CDN का उपयोग करने की तुलना में बूटस्ट्रैप फ़ाइलों की सेवा करना अधिक तेज़ है?
प्रश्न 2:
अगर मैं बूटस्ट्रैप को एनपीएम करने के लिए था, तो मैं बूटस्ट्रैप.जेएस और बूटस्ट्रैप.एससी फाइलों को कैसे इंगित करूंगा?
जवाबों:
CDN का उपयोग करने की बात यह है कि यह सबसे तेज़ है , सबसे पहले, क्योंकि यह एक वितरित नेटवर्क है, लेकिन दूसरी बात, क्योंकि ब्राउज़रों द्वारा स्थिर फ़ाइलों को कैश किया जा रहा है और संभावनाएं अधिक हैं, उदाहरण के लिए, CDN की jqueryलाइब्रेरी जो आपकी साइट है उपयोग पहले से ही उपयोगकर्ता के ब्राउज़र द्वारा डाउनलोड किए गए थे, और इसलिए फ़ाइल कैश हो गई थी, और इसलिए कोई अनावश्यक डाउनलोड नहीं हो रहा है। कहा जा रहा है, यह अभी भी एक अच्छा विचार है कि एक कमबैक प्रदान करें ।
यह है कि यह एक मॉड्यूल के रूप में बूटस्ट्रैप की जावास्क्रिप्ट फाइल प्रदान करता है । जैसा कि ऊपर उल्लेख किया गया है, यह ब्राउज़रइज़ का उपयोग करके इसे संभव बनाता है , जो कि सबसे अधिक संभावना मामला है और, जैसा कि मैं इसे समझता हूं, बूटस्ट्रैप का मुख्य कारण npm पर प्रकाशित किया गया है।require
निम्नलिखित परियोजना संरचना की कल्पना करें:
परियोजना | - node_modules | - जनता | | - सीएसएस | | - img | | - जे एस | | - index.html - पैकेज। json
अपने में index.htmlआप इस तरह से cssऔर jsफ़ाइलों को संदर्भित कर सकते हैं :
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
<script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
जो सबसे सरल तरीका है, और .cssफाइलों के लिए सही है । लेकिन bootstrap.jsआपकी public/js/*.jsफ़ाइलों में कहीं न कहीं इस तरह की फ़ाइल को शामिल करना बेहतर है :
var bootstrap = require('bootstrap');
और आप इस कोड को केवल उन javascriptफाइलों में शामिल करते हैं, जहां आपको वास्तव में जरूरत है bootstrap.js। Browserify आपके लिए इस फाइल को शामिल करने का ध्यान रखता है।
अब, दोष यह है कि आपके पास अब node_modulesनिर्भरता के रूप में आपके सामने के अंत की फाइलें हैं , और node_modulesफ़ोल्डर को आमतौर पर चेक इन नहीं किया जाता है git। मुझे लगता है कि यह सबसे विवादास्पद हिस्सा है, जिसमें कई राय और समाधान हैं ।
इस उत्तर को लिखे हुए मुझे लगभग दो साल बीत चुके हैं और एक अद्यतन जगह में है।
अब आम तौर पर स्वीकृत तरीका एक निर्माण चरण में अपनी सभी संपत्तियों को बंडल करने के लिए वेबपैक (या पसंद का एक और बंडलर) जैसे बंडल का उपयोग करना है।
सबसे पहले, यह आपको ब्राउज़र की तरह कॉमन सिंटैक्स का उपयोग करने की अनुमति देता है, इसलिए अपने प्रोजेक्ट में बूटस्ट्रैप जेएस कोड को शामिल करने के लिए आप वही करें:
const bootstrap = require('bootstrap');
के रूप में cssफ़ाइलें, webpack तो "कहा जाता है लोडर "। वे आपको अपने js कोड में यह लिखने की अनुमति देते हैं:
require('bootstrap/dist/css/bootstrap.css');
और सीएसएस फाइलें आपके निर्माण में शामिल "जादुई" होंगी। <style />जब आपका ऐप चलता है तो उन्हें गतिशील रूप से टैग के रूप में जोड़ा जाएगा , लेकिन आप उन्हें एक अलग cssफ़ाइल के रूप में निर्यात करने के लिए वेबपैक कॉन्फ़िगर कर सकते हैं । आप वेबपैक के प्रलेखन में इसके बारे में अधिक पढ़ सकते हैं।
निष्कर्ष के तौर पर।
node_modulesऔर न ही डायनेमिक रूप से निर्मित फ़ाइलों को तैयार करना चाहिए । आप buildnpm पर एक स्क्रिप्ट जोड़ सकते हैं जिसका उपयोग सर्वर पर फ़ाइलों को तैनात करने के लिए किया जाना चाहिए। वैसे भी, यह आपके पसंदीदा निर्माण प्रक्रिया के आधार पर विभिन्न तरीकों से किया जा सकता है।deferअपनी स्क्रिप्ट या आलसी लोड फ़ाइलों पर वेबपैक और विशेषता का उपयोग कर सकते हैं
यदि आप उन मॉड्यूलों को एनपीएम करते हैं, तो आप स्थैतिक पुनर्निर्देशन का उपयोग करके उनकी सेवा कर सकते हैं।
पहले पैकेज स्थापित करें:
npm install jquery
npm install bootstrap
फिर server.js पर:
var express = require('express');
var app = express();
// prepare server
app.use('/api', api); // redirect API calls
app.use('/', express.static(__dirname + '/www')); // redirect root
app.use('/js', express.static(__dirname + '/node_modules/bootstrap/dist/js')); // redirect bootstrap JS
app.use('/js', express.static(__dirname + '/node_modules/jquery/dist')); // redirect JS jQuery
app.use('/css', express.static(__dirname + '/node_modules/bootstrap/dist/css')); // redirect CSS bootstrap
फिर, आखिरकार .html पर:
<link rel="stylesheet" href="/css/bootstrap.min.css">
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
मैं उस फ़ोल्डर से सीधे पृष्ठों की सेवा नहीं करूँगा जहाँ आपकी server.js फ़ाइल है (जो आमतौर पर नोड_मॉड्यूल्स के समान है) जैसा कि समय- सीमा के अनुसार प्रस्तावित किया जाता है , उस तरह से लोग आपके server.js फ़ाइल तक पहुँच सकते हैं।
बेशक, आप बस डाउनलोड कर सकते हैं और अपने फ़ोल्डर में कॉपी और पेस्ट कर सकते हैं, लेकिन एनपीएम के साथ आप बस जरूरत पड़ने पर अपडेट कर सकते हैं ... आसान, मुझे लगता है।
/jsमार्ग को दो अलग-अलग निर्देशिकाओं पर पुनर्निर्देशित कैसे किया जा सकता है ? यह प्रत्येक में परस्पर विरोधी फाइलें कैसे संभालेगा?
उत्तर 1:
Npm (या bower) के माध्यम से बूटस्ट्रैप डाउनलोड करना आपको कुछ विलंबता समय प्राप्त करने की अनुमति देता है। एक दूरस्थ संसाधन प्राप्त करने के बजाय, आपको एक स्थानीय मिलता है, यह जल्दी है, सिवाय इसके कि अगर आप सीडीएन का उपयोग करते हैं (नीचे दिए गए उत्तर की जांच करें)
"एनपीएम" मूल रूप से नोड मॉड्यूल प्राप्त करने के लिए था, लेकिन जावास्क्रिप्ट भाषा (और ब्राउजर के आगमन) के निबंध के साथ, यह थोड़ा बड़ा हो गया है। वास्तव में, आप npm पर AngularJS भी डाउनलोड कर सकते हैं, यह सर्वर साइड फ्रेमवर्क नहीं है। Browserify आपको क्लाइंट साइड पर AMD / आवश्यकता / कॉमनज का उपयोग करने की अनुमति देता है ताकि क्लाइंट मॉड्यूल पर नोड मॉड्यूल का उपयोग किया जा सके।
उत्तर 2:
यदि आप npm बूटस्ट्रैप स्थापित करते हैं (यदि आप किसी विशिष्ट फ़ोल्डर में जाने के लिए किसी विशेष ग्रन्ट या गल्प फाइल का उपयोग नहीं करते हैं), तो आपका बूटस्ट्रैप "./node_modules/bootstrap/bootstrap.min.css" में स्थित होगा यदि मैं गलत नहीं हूँ।
बूटस्ट्रैप को स्थापित करने के लिए npm / bower का उपयोग करें यदि आप इसे recompile करना चाहते हैं / कम फाइलें / परीक्षण बदलते हैं। ग्रंट के साथ ऐसा करना आसान होगा, जैसा कि http://getbootstrap.com/getting-started/#grunt पर दिखाया गया है । यदि आप केवल पहले से तैयार किए गए पुस्तकालयों को जोड़ना चाहते हैं, तो प्रोजेक्ट में मैन्युअल रूप से फ़ाइलों को शामिल करें।
नहीं, आपको इसे स्वयं करना होगा या अलग ग्रंट टूल का उपयोग करना होगा। उदाहरण के लिए ' ग्रंट-कॉनरीब-कॉनकट ' कैसे ग्रन्ट.जेएस (0.3.x) के साथ कई सीएसएस और जावास्क्रिप्ट फ़ाइलों को संक्षिप्त और छोटा करें।