.net - এএসপি.নেট কোরে কীভাবে বুটস্ট্র্যাপ 4 ব্যবহার করবেন




asp.net-core nuget (7)

আমি নিউগেটের সাথে এএসপি.নেট কোরে বুটস্ট্র্যাপ আপডেট করতে চাই। আমি এটি ব্যবহার করেছি:

Install-Package bootstrap -Version 4.0.0

এটি নির্ভরতা যুক্ত করেছে তবে আমি কীভাবে এটি এখন আমার প্রকল্পে যুক্ত করব? স্থানীয় নুগেট নির্ভরতার জন্য পথ কী?


BS4 এখন .NET কোর 2.2 এ উপলব্ধ । অবশ্যই SDK 2.2.105 x64 ইনস্টলার এ। আমি এটি দিয়ে ভিজ্যুয়াল স্টুডিও 2017 চালাচ্ছি। এখনও পর্যন্ত নতুন ওয়েব অ্যাপ্লিকেশন প্রকল্পগুলির জন্য ভাল।


আমরা এসপিএন কোরটিতে বুটস্ট্র্যাপ 4 ব্যবহার করি তবে "প্যাকেজ ইনস্টলার" এক্সটেনশানটি ব্যবহার করে "এনএমপি" থেকে গ্রন্থাগারগুলি উল্লেখ করে এবং এটি জাভাস্ক্রিপ্ট / সিএসএস লাইব্রেরির নুগেটের চেয়ে ভাল বলে মনে করেছি।

তারপরে আমরা বান্ডলার ও মিনিফায়ার "এক্সটেনশন ব্যবহার করি বিতরণের জন্য প্রাসঙ্গিক ফাইলগুলি (এনপিএম নোড_মডিউলগুলি ফোল্ডার থেকে, যা প্রকল্পের বাইরে বসে) কে আমরা বিকাশ / স্থাপনার জন্য পছন্দ হিসাবে wwwroot এ অনুলিপি করি।


এটি খতিয়ে দেখলে মনে হয় যে বুটস্ট্র্যাপ যুক্ত করার সাথে আমার প্রয়োজনের জন্য LibMan পদ্ধতির সবচেয়ে ভাল কাজ করে। আমি এটি পছন্দ করি কারণ এটি এখন ভিজ্যুয়াল স্টুডিও 2017 (15.8 বা তার পরে) এ অন্তর্নির্মিত এবং এর নিজস্ব ডায়ালগ বাক্স রয়েছে।

প্রকল্পগুলিতে ডিফল্ট পদ্ধতি ভিএস যুক্ত করে বোর ব্যবহার করে তবে দেখে মনে হচ্ছে এটি চলে যাচ্ছে। মাইক্রোসফ্টস bower পৃষ্ঠার শিরোনামে তারা লিখেছেন:

কয়েকটি লিঙ্ক অনুসরণ করে ভিজ্যুয়াল স্টুডিওতে ASP.NET কোরের সাথে LibMan ব্যবহারের দিকে পরিচালিত করে যেখানে এটি বিল্ট-ইন ডায়ালগ ব্যবহার করে কীভাবে লিবস যুক্ত করা যেতে পারে তা shows :

সলিউশন এক্সপ্লোরার-এ, প্রকল্প ফোল্ডারে ডান ক্লিক করুন যাতে ফাইলগুলি যুক্ত করা উচিত। অ্যাড> ক্লায়েন্ট-সাইড লাইব্রেরি নির্বাচন করুন। ক্লায়েন্ট-সাইড লাইব্রেরি সংলাপটি উপস্থিত হয়: [উত্স: shows ]

তারপরে বুটস্ট্র্যাপের জন্য কেবল (1) আনপেকেজি নির্বাচন করুন, (2) "বুটস্ট্র্যাপ @ .." টাইপ করুন (3) ইনস্টল করুন। এর পরে, আপনি কেবল _Layout.cshtml বা অন্য জায়গাগুলির সমস্ত অন্তর্ভুক্তি যাচাই করতে চান। এগুলি href = "~ / lib / বুটস্ট্র্যাপ / ডিস্ট / জেএস / বুটস্ট্র্যাপ ..." ) এর মতো হওয়া উচিত


এনএমপি কনফিগারেশন ফাইলটি ব্যবহার করুন (এটি আপনার ওয়েব প্রোজেক্টে যুক্ত করুন) তারপরে প্রয়োজনীয় প্যাকেজগুলি একইভাবে যুক্ত করুন যেমন আমরা বোভার.জসন এবং সেভ ব্যবহার করে করেছি। ভিজ্যুয়াল স্টুডিওগুলি এটি ডাউনলোড করে ইনস্টল করবে। আপনি আপনার প্রকল্পের এনএমপি নোডের নীচে প্যাকেজটি খুঁজে পাবেন।


দুর্ভাগ্যক্রমে, আপনি নেট নেটওয়ার্ক প্রকল্পে বুটস্ট্র্যাপ (বা বেশিরভাগ অন্যান্য জাভাস্ক্রিপ্ট / সিএসএস ফ্রেমওয়ার্ক) ইনস্টল করতে নুগেট ব্যবহার করে খুব কঠিন সময় কাটাচ্ছেন। আপনি যদি নুগেট ইনস্টলটি দেখেন তবে এটি আপনাকে বেমানান বলেছে:

স্থানীয় প্যাকেজ নির্ভরতাগুলি কোথায় তা আপনার অবশ্যই জানা থাকলে সেগুলি এখন আপনার স্থানীয় প্রোফাইল ডিরেক্টরিতে রয়েছে। যেমন %userprofile%\.nuget\packages\bootstrap\4.0.0\content\Scripts

যাইহোক, আমি এনএমপি, বা বোভার - এ সাইনেশ্বরের উত্তরের মত স্যুইচ করার পরামর্শ দিচ্ছি।


যেমন অন্যরা ইতিমধ্যে উল্লেখ করেছেন, প্যাকেজ ম্যানেজার Bower , সাধারণত ভারী ক্লায়েন্ট-সাইড স্ক্রিপ্টিংয়ের উপর নির্ভর করে না এমন প্রয়োগের ক্ষেত্রে এই জাতীয় নির্ভরতার জন্য ব্যবহৃত হয় , যাবার পথে এবং সক্রিয়ভাবে অন্যান্য সমাধানগুলিতে যাওয়ার পরামর্শ দিচ্ছে:

..psst! webpack বজায় রাখার সময়, আমরা নতুন ফ্রন্ট-এন্ড প্রকল্পগুলির জন্য yarn এবং webpack সুপারিশ করি!

যদিও আপনি এখনই এটি এখনই ব্যবহার করতে পারবেন তবে বুটস্ট্র্যাপও এর getbootstrap.com/docs/4.0/migration/#breaking দেওয়ার ঘোষণা দিয়েছে। ফলস্বরূপ, অন্তর্নির্মিত এএসপি.নেট কোর টেম্পলেটগুলি এ থেকেও দূরে সরে যেতে ধীরে ধীরে সম্পাদনা করা হচ্ছে।

দুর্ভাগ্যক্রমে, সামনে কোনও সুস্পষ্ট পথ নেই। এটি বেশিরভাগ কারণে যে ওয়েব অ্যাপ্লিকেশনগুলি ক্রমাগত ক্লায়েন্ট-সাইডে আরও এগিয়ে চলেছে, জটিল ক্লায়েন্ট-সাইড বিল্ড সিস্টেম এবং অনেকগুলি নির্ভরতা প্রয়োজন। সুতরাং আপনি যদি এরকম কিছু তৈরি করে চলেছেন তবে আপনি কীভাবে এর সমাধান করতে হবে তা আপনি ইতিমধ্যে জেনে থাকতে পারেন এবং বুটস্ট্র্যাপ এবং জিকুয়েরিকে কেবল অন্তর্ভুক্ত করতে আপনি আপনার বিদ্যমান বিল্ড প্রক্রিয়াটি প্রসারিত করতে পারেন।

তবে এখনও অনেকগুলি ওয়েব অ্যাপ্লিকেশন রয়েছে যা ক্লায়েন্টের পক্ষে ভারী নয়, যেখানে অ্যাপ্লিকেশনটি এখনও প্রধানত সার্ভারে চলে এবং ফলস্বরূপ সার্ভার স্থির দর্শনগুলি সরবরাহ করে। এর আগে ভরাট কোনও প্রক্রিয়া ছাড়াই ক্লায়েন্ট-সাইড নির্ভরতা প্রকাশ করা সহজ করে এটিকে পূরণ করেছে।

.NET বিশ্বে আমাদের কাছে নিউগেট এবং পূর্ববর্তী এএসপি.নেট সংস্করণগুলি রয়েছে, আমরা কিছু ক্লায়েন্ট-পার্শ্ব নির্ভরতাগুলিতে নির্ভরতা যুক্ত করতে নিউগেটও ব্যবহার করতে পারি যেহেতু নুগেট কেবল আমাদের প্রকল্পে সামগ্রীটি সঠিকভাবে স্থাপন করবে। দুর্ভাগ্যক্রমে, নতুন .csproj ফর্ম্যাট এবং নতুন .csproj সাথে, ইনস্টল করা প্যাকেজগুলি আমাদের প্রকল্পের বাইরে অবস্থিত, তাই আমরা কেবল সেগুলি উল্লেখ করতে পারি না।

এটি আমাদের নির্ভরতাগুলি কীভাবে যুক্ত করতে পারে তার কয়েকটি বিকল্প সহ আমাদের ছেড়ে দেয়:

এককালীন ইনস্টলেশন

এটি বর্তমানে এএসপি.নেট কোর টেম্পলেটগুলি যা একক পৃষ্ঠাগুলির অ্যাপ্লিকেশন নয়। আপনি যখন wwwroot একটি নতুন অ্যাপ্লিকেশন তৈরি করতে ব্যবহার করেন, wwwroot ফোল্ডারে কেবল একটি ফোল্ডার wwwroot থাকে যা নির্ভরতা ধারণ করে:

আপনি যদি বর্তমানে ফাইলগুলি ঘনিষ্ঠভাবে লক্ষ্য করেন তবে দেখতে পাবেন যে সেগুলি টেমপ্লেট তৈরি করতে মূলত সেখানে বোরের সাথে রাখা হয়েছিল, তবে এটি শীঘ্রই পরিবর্তিত হওয়ার সম্ভাবনা রয়েছে। মূল ধারণাটি হ'ল ফাইলগুলি একবারে wwwroot ফোল্ডারে অনুলিপি করা হয় যাতে আপনি তাদের উপর নির্ভর করতে পারেন।

এটি করার জন্য, আমরা কেবল বুটস্ট্র্যাপের ভূমিকা অনুসরণ করতে পারি এবং সংকলিত ফাইলগুলি সরাসরি ডাউনলোড করতে পারি । ডাউনলোড সাইটে উল্লিখিত হিসাবে jQuery অন্তর্ভুক্ত নয়, তাই আমাদেরও এটি আলাদাভাবে ডাউনলোড করতে হবে; এটিতে Popper.js যদিও আমরা যদি পরে bootstrap.bundle ফাইলটি ব্যবহার করতে বেছে Popper.js — যা আমরা করব। JQuery এর জন্য, আমরা কেবল ডাউনলোড সাইট থেকে একটি একক "সংকুচিত, উত্পাদন" ফাইল পেতে পারি।

এটি আমাদের কয়েকটি ফাইল দেয় যা কেবল এক্সট্রাক্ট করে wwwroot ফোল্ডারে অনুলিপি করতে wwwroot । এগুলি বাহ্যিক নির্ভরতা: এটি পরিষ্কার করার জন্য আমরা একটি lib তৈরি করতে পারি:

_Layout.cshtml আমাদের প্রয়োজন, সুতরাং এখন আমাদের _Layout.cshtml করতে হবে _Layout.cshtml ফাইলগুলি _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> একেবারে শেষে নীচের অংশে ব্লক <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

ডকুমেন্টেশনে বর্ণিত হিসাবে, আমরা বান্ডিলিং এবং মিনিফিকেশনের জন্য একটি 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 এই ফাইলগুলি অন্তর্ভুক্ত করার জন্য আমাদের আমাদের _Layouts.html আবার সমন্বয় করা:

<!-- inside <head> -->
<link rel="stylesheet" href="~/vendor.min.css" />

<!-- at the end of <body> -->
<script src="~/vendor.min.js"></script>

গুলপের মতো টাস্ক ম্যানেজার ব্যবহার করা

আমরা যদি ক্লায়েন্ট-পার্শ্ব বিকাশে আরও কিছুটা সরতে চাই, আমরা সেখানে যে সরঞ্জামগুলি ব্যবহার করব সেগুলিও আমরা ব্যবহার করতে শুরু করতে পারি। উদাহরণস্বরূপ webpack যা সত্যিই সব কিছুর জন্য খুব সাধারণভাবে ব্যবহৃত বিল্ড টুল tool তবে আমরা Gulp মতো একটি সহজ টাস্ক ম্যানেজার দিয়েও শুরু করতে পারি এবং প্রয়োজনীয় কয়েকটি পদক্ষেপ Gulp করতে পারি।

তার জন্য, আমরা নীচের বিষয়বস্তু সহ আমাদের প্রকল্পের gulpfile.js একটি 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 সামঞ্জস্য করতে হবে: package.json এবং package.json উপর নির্ভরতা রাখতে:

{
  "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 প্রাথমিক সেটআপটি উপরের একটি bundleconfig.json চেয়ে কিছুটা জটিল, আমরা এখন নোড-ওয়ার্ল্ডে প্রবেশ করেছি এবং সেখানে অন্যান্য সমস্ত শীতল সরঞ্জাম ব্যবহার শুরু করতে পারি। সুতরাং এটি দিয়ে শুরু করা মূল্যবান হতে পারে।

উপসংহার

যদিও এটি হঠাৎ করে কেবল বোভার ব্যবহারের চেয়ে অনেক জটিল হয়ে উঠেছে, আমরা সেই নতুন বিকল্পগুলির সাথেও অনেকগুলি নিয়ন্ত্রণ অর্জন করতে পারি। উদাহরণস্বরূপ, আমরা এখন সিদ্ধান্ত নিতে পারি যে প্রকৃতপক্ষে wwwroot ফোল্ডারের মধ্যে কী ফাইল অন্তর্ভুক্ত রয়েছে এবং সেগুলি দেখতে ঠিক কেমন দেখাচ্ছে। এবং আমরা নোডের সাথে ক্লায়েন্ট-সাইড ডেভলপমেন্ট ওয়ার্ল্ডে প্রথম পদক্ষেপগুলি তৈরি করতে এটি ব্যবহার করতে পারি যা কমপক্ষে শেখার বক্ররেখাতে কিছুটা সহায়তা করা উচিত।


Libman চেষ্টা করুন, এটি বোভারের মতোই সহজ এবং আপনি ডাউনলোড ফোল্ডার হিসাবে wwwroot / lib / নির্দিষ্ট করতে পারেন।







asp.net-core-2.0