যেমন অন্যরা ইতিমধ্যে উল্লেখ করেছেন, প্যাকেজ ম্যানেজার বোভার , সাধারণত ভারী ক্লায়েন্ট-সাইড স্ক্রিপ্টিংয়ের উপর নির্ভর করে না এমন প্রয়োগের ক্ষেত্রে এই জাতীয় নির্ভরতার জন্য ব্যবহৃত হয় , যাবার পথে এবং সক্রিয়ভাবে অন্যান্য সমাধানগুলিতে যাওয়ার পরামর্শ দিচ্ছে:
..psst! বওয়ারটি বজায় রাখার সময়, আমরা নতুন ফ্রন্ট-এন্ড প্রকল্পগুলির জন্য সুতা এবং ওয়েবপ্যাকটি সুপারিশ করি !
যদিও আপনি এখনই এটি এখনই ব্যবহার করতে পারবেন তবে বুটস্ট্র্যাপও এর জন্য সমর্থন বাদ দেওয়ার ঘোষণা দিয়েছে । ফলস্বরূপ, অন্তর্নির্মিত এএসপি.নেট কোর টেম্পলেটগুলি এ থেকেও দূরে সরে যেতে ধীরে ধীরে সম্পাদনা করা হচ্ছে।
দুর্ভাগ্যক্রমে, সামনে কোনও সুস্পষ্ট পথ নেই। এটি বেশিরভাগ কারণে যে ওয়েব অ্যাপ্লিকেশনগুলি ক্রমাগত ক্লায়েন্ট-সাইডে আরও এগিয়ে চলেছে, জটিল ক্লায়েন্ট-সাইড বিল্ড সিস্টেম এবং অনেকগুলি নির্ভরতা প্রয়োজন। সুতরাং আপনি যদি এরকম কিছু তৈরি করে চলেছেন তবে আপনি কীভাবে এর সমাধান করতে হবে তা আপনি ইতিমধ্যে জেনে থাকতে পারেন এবং বুটস্ট্র্যাপ এবং জিকুয়েরিকে কেবল অন্তর্ভুক্ত করতে আপনি আপনার বিদ্যমান বিল্ড প্রক্রিয়াটি প্রসারিত করতে পারেন।
কিন্তু এখনও অনেকগুলি ওয়েব অ্যাপ্লিকেশন রয়েছে যা ক্লায়েন্টের পক্ষে ভারী নয়, যেখানে অ্যাপ্লিকেশনটি এখনও মূলত সার্ভারে চলে এবং ফলস্বরূপ সার্ভার স্থির দর্শনগুলি সরবরাহ করে। এর আগে ভরাট কোনও প্রক্রিয়া ছাড়াই ক্লায়েন্ট-সাইড নির্ভরতা প্রকাশ করা সহজ করে এটিকে পূরণ করেছে।
.NET বিশ্বে আমাদের কাছে নিউগেট এবং পূর্ববর্তী এএসপি.নেট সংস্করণগুলি রয়েছে, আমরা কিছু ক্লায়েন্ট-পার্শ্ব নির্ভরতাগুলিতে নির্ভরতা যুক্ত করতে নুগেটকেও ব্যবহার করতে পারি যেহেতু নুগেট কেবল আমাদের প্রকল্পে সামগ্রীটি সঠিকভাবে স্থাপন করবে। দুর্ভাগ্যক্রমে, নতুন .csprojফর্ম্যাট এবং নতুন নিউগেটের সাথে ইনস্টলড প্যাকেজগুলি আমাদের প্রকল্পের বাইরে অবস্থিত, তাই আমরা কেবল সেগুলি উল্লেখ করতে পারি না।
এটি আমাদের নির্ভরতাগুলি কীভাবে যুক্ত করতে পারে তার কয়েকটি বিকল্প সহ আমাদের ছেড়ে দেয়:
এককালীন ইনস্টলেশন
এটি বর্তমানে এএসপি.নেট কোর টেম্পলেটগুলি যা একক পৃষ্ঠাগুলির অ্যাপ্লিকেশন নয়। আপনি যখন নতুন অ্যাপ্লিকেশন তৈরি করতে সেগুলি ব্যবহার করেন, 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>এটিকে কিছুটা সহজ করার জন্য কেবলমাত্র সংশোধিত সংস্করণগুলি অন্তর্ভুক্ত করতে পারেন এবং ট্যাগ সহায়কগুলিকে এড়িয়ে যেতে পারেন। তবে আপনাকে চালিয়ে যাওয়ার জন্য আপনার যা করা দরকার তা এটি।
এনপিএম থেকে নির্ভরতা
আরও আধুনিক উপায়, আপনি যদি নিজের নির্ভরতা আপডেট রাখতে চান তবে এটি এনপিএম প্যাকেজ সংগ্রহস্থল থেকে নির্ভরতা পেতে পারে। আপনি এর জন্য এনপিএম বা সুতা ব্যবহার করতে পারেন; আমার উদাহরণে, আমি এনপিএম ব্যবহার করব।
শুরু করার 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 বর্ণিত হিসাবে আমরা বান্ডিলিং এবং মিনিফিকেশনের জন্য গ্রাহক হওয়ার বিভিন্ন উপায়গুলির একটি ব্যবহার করতে পারি । খুব সহজ উপায় হ'ল বিল্ডবান্ডলারমিনিফায়ার নুগেট প্যাকেজটি ব্যবহার করা যা স্বয়ংক্রিয়ভাবে এর জন্য একটি বিল্ড টাস্ক সেট করে।
এই প্যাকেজটি ইনস্টল করার পরে, আমাদের 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>
গুল্পের মতো টাস্ক ম্যানেজার ব্যবহার করা
আমরা যদি ক্লায়েন্ট-পার্শ্ব বিকাশের দিকে আরও কিছুটা যেতে চাই, আমরা সেখানে যে সরঞ্জামগুলি ব্যবহার করব সেগুলিও আমরা ব্যবহার করতে শুরু করতে পারি। উদাহরণস্বরূপ ওয়েবপ্যাক যা সত্যই সব কিছুর জন্য খুব সাধারণভাবে নির্মিত বিল্ড সরঞ্জাম tool তবে আমরা গুল্পের মতো একটি সহজ টাস্ক ম্যানেজার দিয়েও শুরু করতে পারি পারি এবং প্রয়োজনীয় কয়েকটি পদক্ষেপ করতে পারি।
তার জন্য, আমরা 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ফোল্ডারগুলির মধ্যে আসলে ফাইলগুলি অন্তর্ভুক্ত রয়েছে এবং সেগুলি দেখতে ঠিক কীভাবে দেখা যায়। এবং আমরা নোডের সাথে ক্লায়েন্ট-সাইড ডেভলপমেন্ট ওয়ার্ল্ডে প্রথম পদক্ষেপগুলি তৈরি করতে এটি ব্যবহার করতে পারি যা কমপক্ষে শেখার বক্ররেখাতে কিছুটা সহায়তা করা উচিত ।
