जैसा कि दूसरों ने पहले ही उल्लेख किया है, पैकेज मैनेजर बोवर , जो आमतौर पर इस तरह की निर्भरता के लिए उपयोग किया जाता था जो कि भारी क्लाइंट-साइड स्क्रिप्टिंग पर भरोसा नहीं करता है, बाहर जाने के रास्ते पर है और सक्रिय रूप से अन्य समाधानों की ओर बढ़ने की सिफारिश कर रहा है:
..psst! जबकि बोवर बनाए रखा जाता है, हम नए फ्रंट-एंड प्रोजेक्ट्स के लिए यार्न और वेबपैक की सलाह देते हैं!
इसलिए यद्यपि आप अभी भी इसका उपयोग कर सकते हैं, बूटस्ट्रैप ने भी इसके लिए समर्थन छोड़ने की घोषणा की है । नतीजतन, अंतर्निहित ASP.NET कोर टेम्प्लेट को धीरे-धीरे संपादित किया जा रहा है ताकि वह उससे भी दूर जा सके।
दुर्भाग्य से, आगे कोई स्पष्ट रास्ता नहीं है। यह ज्यादातर इस तथ्य के कारण है कि वेब एप्लिकेशन लगातार क्लाइंट-साइड में आगे बढ़ रहे हैं, जिसके लिए जटिल क्लाइंट-साइड बिल्ड सिस्टम और कई निर्भरताएं आवश्यक हैं। तो अगर आप ऐसा कुछ बना रहे हैं, तो आप पहले से ही जानते हैं कि इसे कैसे हल किया जाए, और आप अपनी मौजूदा निर्माण प्रक्रिया का विस्तार करने के लिए बस बूटस्ट्रैप और jQuery शामिल कर सकते हैं।
लेकिन अभी भी कई वेब एप्लिकेशन हैं जो क्लाइंट-साइड पर भारी नहीं हैं, जहां एप्लिकेशन अभी भी मुख्य रूप से सर्वर पर चलता है और परिणामस्वरूप सर्वर स्थिर विचारों को कार्य करता है। बोवर ने पहले इसे केवल क्लाइंट-साइड निर्भरता को प्रकाशित करने के लिए आसान बना दिया, ताकि यह बहुत अधिक प्रक्रिया के बिना हो।
.NET की दुनिया में भी हमारे पास NuGet है और पिछले ASP.NET संस्करणों के साथ, हम NuGet के साथ-साथ कुछ क्लाइंट-साइड निर्भरता के लिए निर्भरता को जोड़ने के लिए उपयोग कर सकते हैं क्योंकि NuGet सिर्फ हमारे प्रोजेक्ट में सामग्री को सही ढंग से रखेगा। दुर्भाग्य से, नए .csprojप्रारूप और नए NuGet के साथ, स्थापित पैकेज हमारी परियोजना के बाहर स्थित हैं, इसलिए हम केवल उन संदर्भ नहीं दे सकते।
यह हमारी निर्भरता को जोड़ने के कुछ विकल्पों के साथ हमें छोड़ देता है:
एक बार की स्थापना
यह वही है जो ASP.NET कोर टेम्प्लेट्स, जो कि सिंगल-पेज एप्लिकेशन नहीं हैं, वर्तमान में कर रहे हैं। जब आप एक नया एप्लिकेशन बनाने के लिए उन का उपयोग करते हैं, तो wwwrootफ़ोल्डर में बस एक फ़ोल्डर libहोता है जिसमें निर्भरताएं होती हैं:
यदि आप वर्तमान में फाइलों को करीब से देखते हैं, तो आप देख सकते हैं कि उन्हें मूल रूप से टेम्पलेट बनाने के लिए बोवर के साथ रखा गया था, लेकिन जल्द ही इसमें बदलाव होने की संभावना है। मूल विचार यह है कि फ़ाइलों को एक बारwwwroot फ़ोल्डर में कॉपी किया जाता है ताकि आप उन पर निर्भर रह सकें।
ऐसा करने के लिए, हम बस बूटस्ट्रैप के परिचय का पालन कर सकते हैं और सीधे संकलित फ़ाइलों को डाउनलोड कर सकते हैं। जैसा कि डाउनलोड साइट पर उल्लेख किया गया है, इसमें jQuery शामिल नहीं है , इसलिए हमें इसे अलग से भी डाउनलोड करना होगा; यह शामिल करता है Popper.js हालांकि हम उपयोग करने के लिए चुनते हैं bootstrap.bundleफ़ाइल बाद में-जो हम क्या करेंगे। JQuery के लिए, हम केवल डाउनलोड साइट से एक "संपीड़ित, उत्पादन" फ़ाइल प्राप्त कर सकते हैं (लिंक पर राइट-क्लिक करें और मेनू से "लिंक के रूप में सहेजें ..." का चयन करें)।
यह हमें कुछ फ़ाइलों के साथ छोड़ देता है जो केवल wwwrootफ़ोल्डर में निकालेंगे और कॉपी करेंगे । हम libयह स्पष्ट करने के लिए एक फ़ोल्डर भी बना सकते हैं कि ये बाहरी निर्भरताएँ हैं:
हमें बस इतना ही चाहिए, इसलिए अब हमें _Layout.cshtmlउन निर्भरताओं को शामिल करने के लिए अपनी फ़ाइल को समायोजित करने की आवश्यकता है । उसके लिए, हम निम्नलिखित ब्लॉक को इसमें जोड़ते हैं <head>:
<environment include="Development">
<link rel="stylesheet" href="~/lib/css/bootstrap.css" />
</environment>
<environment exclude="Development">
<link rel="stylesheet" href="~/lib/css/bootstrap.min.css" />
</environment>
और निम्नलिखित ब्लॉक के अंत में <body>:
<environment include="Development">
<script src="~/lib/js/jquery-3.3.1.js"></script>
<script src="~/lib/js/bootstrap.bundle.js"></script>
</environment>
<environment exclude="Development">
<script src="~/lib/js/jquery-3.3.1.min.js"></script>
<script src="~/lib/js/bootstrap.bundle.min.js"></script>
</environment>
आप केवल छोटे संस्करणों को शामिल कर सकते हैं और <environment>टैग सहायकों को इसे थोड़ा सरल बनाने के लिए छोड़ सकते हैं । लेकिन आपको शुरू करने के लिए बस इतना ही करना होगा।
एनपीएम से निर्भरता
अधिक आधुनिक तरीका, भले ही आप अपनी निर्भरता को अपडेट रखना चाहते हों, एनपीएम पैकेज रिपॉजिटरी से निर्भरता प्राप्त करना होगा। आप इसके लिए एनपीएम या यार्न का उपयोग कर सकते हैं; मेरे उदाहरण में, मैं NPM का उपयोग करूँगा।
शुरू करने के लिए, हमें package.jsonअपनी परियोजना के लिए एक फ़ाइल बनाने की आवश्यकता है , इसलिए हम अपनी निर्भरता निर्दिष्ट कर सकते हैं। ऐसा करने के लिए, हम बस "नया आइटम जोड़ें" संवाद से करते हैं:
एक बार जब हमारे पास यह हो जाता है, तो हमें अपनी निर्भरता को शामिल करने के लिए इसे संपादित करना होगा। यह कुछ इस तरह दिखना चाहिए:
{
"version": "1.0.0",
"name": "asp.net",
"private": true,
"devDependencies": {
"bootstrap": "4.0.0",
"jquery": "3.3.1",
"popper.js": "1.12.9"
}
}
बचत करके, विजुअल स्टूडियो पहले से ही हमारे लिए निर्भरता स्थापित करने के लिए एनपीएम चलाएगा। उन्हें node_modulesफ़ोल्डर में स्थापित किया जाएगा । तो क्या करना बाकी है, वहां से फाइलों को हमारे wwwrootफोल्डर में लाना है । ऐसा करने के लिए कुछ विकल्प हैं:
bundleconfig.json बंडलिंग और मिनिफिकेशन के लिए
हम bundleconfig.jsonबंडलिंग और मिनिफिकेशन के लिए विभिन्न तरीकों में से एक का उपयोग कर सकते हैं , जैसा कि प्रलेखन में बताया गया है । एक बहुत ही आसान तरीका है कि आप आसानी से BuildBundlerMinifier NuGet पैकेज का उपयोग करें, जो स्वचालित रूप से इसके लिए एक बिल्ड कार्य सेट करता है।
उस पैकेज को स्थापित करने के बाद, हमें bundleconfig.jsonनिम्नलिखित सामग्रियों के साथ परियोजना के मूल में बनाने की आवश्यकता है :
[
{
"outputFileName": "wwwroot/vendor.min.css",
"inputFiles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"minify": { "enabled": false }
},
{
"outputFileName": "wwwroot/vendor.min.js",
"inputFiles": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
],
"minify": { "enabled": false }
}
]
यह मूल रूप से कॉन्फ़िगर करता है कि किस फाइल को किस में संयोजित करना है। और जब हम निर्माण करते हैं, तो हम देख सकते हैं कि vendor.min.cssऔर vendor.js.cssसही ढंग से बनाए गए हैं। इसलिए हमें केवल _Layouts.htmlउन फ़ाइलों को शामिल करने के लिए फिर से समायोजित करने की आवश्यकता है :
<!-- inside <head> -->
<link rel="stylesheet" href="~/vendor.min.css" />
<!-- at the end of <body> -->
<script src="~/vendor.min.js"></script>
गुल की तरह एक कार्य प्रबंधक का उपयोग करना
अगर हम क्लाइंट-साइड डेवलपमेंट में थोड़ा और आगे बढ़ना चाहते हैं, तो हम उन टूल्स का इस्तेमाल करना भी शुरू कर सकते हैं, जिन्हें हम वहाँ इस्तेमाल करेंगे। उदाहरण के लिए वेबपैक जो वास्तव में सब कुछ के लिए एक बहुत ही सामान्य रूप से निर्मित उपकरण है। लेकिन हम भी एक सरल कार्य प्रबंधक के साथ शुरू कर सकते हैं जैसे कि गुल्प और कुछ आवश्यक कदमों को स्वयं करना।
उसके लिए, हम gulpfile.jsअपने प्रोजेक्ट रूट में निम्नलिखित सामग्री के साथ जोड़ते हैं:
const gulp = require('gulp');
const concat = require('gulp-concat');
const vendorStyles = [
"node_modules/bootstrap/dist/css/bootstrap.min.css"
];
const vendorScripts = [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js",
];
gulp.task('build-vendor-css', () => {
return gulp.src(vendorStyles)
.pipe(concat('vendor.min.css'))
.pipe(gulp.dest('wwwroot'));
});
gulp.task('build-vendor-js', () => {
return gulp.src(vendorScripts)
.pipe(concat('vendor.min.js'))
.pipe(gulp.dest('wwwroot'));
});
gulp.task('build-vendor', gulp.parallel('build-vendor-css', 'build-vendor-js'));
gulp.task('default', gulp.series('build-vendor'));
अब, हम package.jsonपर निर्भरता है gulpऔर gulp-concat:
{
"version": "1.0.0",
"name": "asp.net",
"private": true,
"devDependencies": {
"bootstrap": "4.0.0",
"gulp": "^4.0.2",
"gulp-concat": "^2.6.1",
"jquery": "3.3.1",
"popper.js": "1.12.9"
}
}
अंत में, हम .csprojनिम्नलिखित कार्य को जोड़ने के लिए संपादित करते हैं जो यह सुनिश्चित करता है कि जब हम प्रोजेक्ट का निर्माण करते हैं तो हमारा गुलप कार्य चलता है:
<Target Name="RunGulp" BeforeTargets="Build">
<Exec Command="node_modules\.bin\gulp.cmd" />
</Target>
अब, जब हम निर्माण करते हैं, तो defaultगुलप कार्य चलता है, जो build-vendorकार्यों को चलाता है, जो तब हमारे निर्माण करता है vendor.min.cssऔर vendor.min.jsजैसे हमने पहले किया था। तो _Layout.cshtmlऊपर की तरह हमारे समायोजन के बाद , हम jQuery और बूटस्ट्रैप का उपयोग कर सकते हैं।
जबकि गुलप का प्रारंभिक सेटअप bundleconfig.jsonऊपर के मुकाबले थोड़ा अधिक जटिल है , हम अब नोड-दुनिया में प्रवेश कर चुके हैं और वहां अन्य सभी शांत उपकरणों का उपयोग करना शुरू कर सकते हैं। तो यह इसके साथ शुरू करने के लिए लायक हो सकता है।
निष्कर्ष
जबकि यह अचानक केवल बोवर का उपयोग करने की तुलना में बहुत अधिक जटिल हो गया, हम उन नए विकल्पों के साथ बहुत अधिक नियंत्रण प्राप्त करते हैं। उदाहरण के लिए, अब हम यह तय कर सकते हैं कि wwwrootफ़ोल्डर के भीतर वास्तव में कौन सी फाइलें शामिल हैं और वे वास्तव में कैसी दिखती हैं। और हम इसका उपयोग नोड के साथ क्लाइंट-साइड डेवलपमेंट की दुनिया में पहली चाल बनाने के लिए कर सकते हैं जो कम से कम सीखने की अवस्था के साथ थोड़ी मदद करनी चाहिए ।
