এনপিএমের মাধ্যমে টুইটার বুটস্ট্র্যাপ ইনস্টল করার উদ্দেশ্য?

Question

প্রশ্ন 1:

এনপিএমের মাধ্যমে টুইটার বুটস্ট্র্যাপ ইনস্টল করার উদ্দেশ্যটি কী? আমি ভেবেছিলাম এনপিএম সার্ভার সাইড মডিউলগুলির জন্য। সিডিএন ব্যবহারের চেয়ে বুটস্ট্র্যাপ ফাইলগুলি নিজেই পরিবেশন করা কি দ্রুত?

প্রশ্ন 2:

আমি যদি বুটস্ট্রাপ এনপিএম ইনস্টল করতে পারি, তবে আমি কীভাবে বুটস্ট্র্যাপ.জেএস এবং বুটস্ট্র্যাপ সিএসএস ফাইলগুলিতে নির্দেশ করব?

Comments

আমি যে মুখ্য ব্যবহারের কথা ভাবতে পারি তা হ'ল আপনার ফ্রন্টএন্ড জেএস উন্নয়নের জন্য ব্রাউজারফি ব্যবহার করা।

— সিভেরবার্ট

@ কেভেরবার্ট: টিএল সরবরাহ করার জন্য ধন্যবাদ; ডাঃ উত্তর :)

— ইভান ডার্সট

Answer 1

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

   এখন, বুটস্ট্র্যাপের এনপিএম প্যাকেজটির পয়েন্ট

   এটি মডিউল হিসাবে বুটস্ট্র্যাপের জাভাস্ক্রিপ্ট ফাইল সরবরাহ করে । উপরে উল্লিখিত হিসাবে, এটি ব্রাউসরিফাই ব্যবহার করে এটিটিকে সম্ভব করে তোলে যা সম্ভবত ব্যবহারের ক্ষেত্রে এবং যেমনটি আমি বুঝতে পেরেছি, এনপিএমে বুটস্ট্র্যাপ প্রকাশের মূল কারণ।require

2. এটি কিভাবে ব্যবহার করতে

   নিম্নলিখিত প্রকল্প কাঠামো কল্পনা করুন:

   প্রকল্পের
   | - নোড_মডিউলস
   | - প্রকাশ্য
   | | - সিএসএস
   | | - img
   | | - জেএস
   | | - সূচক। html
   | - package.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। ব্রাউজারফাই আপনার জন্য এই ফাইলটি অন্তর্ভুক্ত করার যত্ন নেয়।

এখন, অসুবিধাটি হ'ল আপনার এখন আপনার ফ্রন্ট-এন্ড ফাইলগুলি node_modulesনির্ভরতা হিসাবে রয়েছে এবং node_modulesফোল্ডারটি সাধারণত চেক ইন হয় না git। আমি মনে করি এটি অনেক বিতর্কিত অংশ, অনেকগুলি মতামত এবং সমাধান সহ ।

---

মার্চ 2017 আপডেট করুন

আমি এই উত্তরটি লেখার প্রায় দুই বছর কেটে গেছে এবং একটি আপডেটের জায়গায় রয়েছে।

এখন সাধারণভাবে গ্রহণযোগ্য উপায় ব্যবহার করা bundler মত webpack একটি build ধাপে আপনার সকল সম্পদ বান্ডেল করতে (বা পছন্দের অন্য bundler)।

প্রথমত, এটি আপনাকে ব্রাউজারিফাইয়ের মতো কমনজ সিনট্যাক্স ব্যবহার করতে দেয়, যাতে আপনার প্রকল্পে বুটস্ট্র্যাপ জেএস কোড অন্তর্ভুক্ত করতে আপনি একই কাজ করেন:

const bootstrap = require('bootstrap');

cssফাইলগুলির হিসাবে , ওয়েবপ্যাকটি " লোডার " বলেছে । তারা আপনাকে আপনার জেএস কোডে এটি লেখার অনুমতি দেয়:

require('bootstrap/dist/css/bootstrap.css');

এবং সিএসএস ফাইলগুলি আপনার বিল্ডটিতে "ম্যাজিকালি" অন্তর্ভুক্ত থাকবে। <style />আপনার অ্যাপটি চললে এগুলিকে গতিশীলভাবে ট্যাগ হিসাবে যুক্ত করা হবে , তবে আপনি আলাদা cssফাইল হিসাবে রফতানি করতে ওয়েবপ্যাকটি কনফিগার করতে পারেন । আপনি ওয়েবপ্যাকের ডকুমেন্টেশনে সে সম্পর্কে আরও পড়তে পারেন।

উপসংহারে.

1. আপনার অ্যাপ্লিকেশন কোডটি একটি বান্ডেলারের সাহায্যে "বান্ডিল" করা উচিত
2. node_modulesগিটের জন্য আপনার গতিবদ্ধভাবে নির্মিত ফাইলগুলিও প্রতিশ্রুতিবদ্ধ করা উচিত নয় । আপনি buildএনপিএম-তে একটি স্ক্রিপ্ট যুক্ত করতে পারেন যা সার্ভারে ফাইল মোতায়েনের জন্য ব্যবহার করা উচিত। যাইহোক, আপনার পছন্দসই বিল্ড প্রক্রিয়াটির উপর নির্ভর করে এটি বিভিন্ন উপায়ে করা যেতে পারে।

Comments

আমি কেবল এটি করেছি তবে লোকালহোস্ট পেতে থাকি : 3000 / বুটস্ট্র্যাপ 404 (পাওয়া যায় না), এ সম্পর্কে কোনও চিন্তাভাবনা আছে?

— এমেরাক

আমি বলব যে "সম্ভাবনা বেশি যে উদাহরণস্বরূপ, সিডিএন এর জেকারি লাইব্রেরি যা আপনার সাইট ব্যবহারকারীদের ব্রাউজার দ্বারা ইতিমধ্যে ডাউনলোড করা হয়েছে" এটি একটি অতিরঞ্জিত

আমাকে বলতে হবে যে ওয়েবপ্যাকের উত্তরটি সঠিক। তবে ওপি প্রশ্নের উত্তর দেওয়ার জন্য: স্ক্রিপ্ট / স্টাইলশিট লোড হলে পরীক্ষার কোনও ঝরঝরে উপায় নেই। এইচটিটিপি / 2 মাল্টিপ্লেক্সিংয়ের মাধ্যমে এই সমস্যাগুলি সমাধান করতে পারে। তবে বেশিরভাগ ক্ষেত্রে, আপনি ওয়েবপ্যাক এবং deferআপনার স্ক্রিপ্টগুলিতে বা অলস লোড ফাইলগুলিতে বৈশিষ্ট্যটি ব্যবহার করতে পারেন

— টাম্বব

Answer 2

আপনি যদি এই মডিউলগুলি এনপিএম করেন তবে আপনি স্ট্যাটিক পুনঃনির্দেশ ব্যবহার করে সেগুলি পরিবেশন করতে পারেন।

প্রথমে প্যাকেজগুলি ইনস্টল করুন:

npm install jquery
npm install bootstrap

তারপরে সার্ভার.জেজে:

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

তারপরে, শেষ অবধি, এইচটিএমএল:

<link rel="stylesheet" href="/css/bootstrap.min.css">
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>

টাইমটাউন্ডারের দ্বারা প্রস্তাবিত যেখানে আপনার সার্ভার.জেএস ফাইল (যা সাধারণত নোড_মডিউলগুলির সমান হয়) ফোল্ডার থেকে সরাসরি পৃষ্ঠাগুলি পরিবেশন করব না , এইভাবে লোকেরা আপনার সার্ভার.জেএস ফাইলটি অ্যাক্সেস করতে পারে।

অবশ্যই আপনি নিজের ফোল্ডারে কেবল ডাউনলোড এবং অনুলিপি এবং পেস্ট করতে পারেন, তবে এনপিএম দিয়ে আপনি প্রয়োজনের সময় কেবল আপডেট করতে পারবেন ... সহজ, আমি মনে করি।

Comments

ওয়েব ঝড় দ্বারা উত্পন্ন এক্সপ্রেস নোড প্রকল্পের সাথে যারা কাজ করছেন তাদের জন্য আপনার অ্যাপ্লিকেশনগুলিতে কোডটি যুক্ত করতে হবে

— কেমিকোফা ভূত

আমি কখনও স্ট্যাটিক ফ্রন্ট-এন্ড ফাইলগুলি সার্ভার ফাইলগুলির সাথে একত্রে রাখার প্রস্তাব দিইনি।

— টাইমটাউন্ডার

জেএস ফাইল লোড করার সময় বা রেডি হ্যান্ডলারের অভ্যন্তরে আপনি কি সেই কলগুলি অ্যাপে করেন?

— pupeno

@ পাবলো, আমি কোড স্নিপেটের মতোই এটি শুরুতে ব্যবহার করি।

— অগাস্টো Goncalves

কীভাবে একই /jsরুট দুটি পৃথক ডিরেক্টরিতে পুনর্নির্দেশ করতে পারে? এটি প্রতিটি মধ্যে বিরোধী ফাইলগুলি কীভাবে পরিচালনা করবে?

— জ্যাকব ফোর্ড

Answer 3

উত্তর 1:

• এনপিএম (বা বোভার) এর মাধ্যমে বুটস্ট্র্যাপ ডাউনলোড করা আপনাকে কিছুটা বিলম্ব করার জন্য অনুমতি দেয়। রিমোট রিসোর্স পাওয়ার পরিবর্তে আপনি একটি লোকাল পেয়ে যাবেন, এটি দ্রুত, আপনি সিডিএন ব্যবহার না করে বাদ দিয়ে (নীচের উত্তরটি দেখুন)

• "এনপিএম" মূলত নোড মডিউল পাওয়ার জন্য ছিল, তবে জাভাস্ক্রিপ্ট ভাষার প্রবন্ধ (এবং ব্রাউজারিফির আবির্ভাব) দিয়ে এটি কিছুটা বড় হয়েছে। আসলে, আপনি এমনকি এনপিএম এ অ্যাংুলারজেএস ডাউনলোড করতে পারেন, এটি কোনও সার্ভার সাইড ফ্রেমওয়ার্ক নয়। ব্রাউজারফাই আপনাকে ক্লায়েন্টের পাশে এএমডি / প্রয়োজনীয় জেএস / কমনজেএস ব্যবহার করার অনুমতি দেয় যাতে নোড মডিউলগুলি ক্লায়েন্টের পক্ষে ব্যবহার করা যায়।

উত্তর 2:

আপনি যদি এনপিএম বুটস্ট্র্যাপ ইনস্টল করেন (যদি আপনি কোনও ডিফল্ট ফোল্ডারে যেতে কোনও নির্দিষ্ট গ্রান্ট বা গল্প ফাইল ব্যবহার করেন না), আপনার বুটস্ট্র্যাপটি "./node_modules/bootstrap/bootstrap.min.css" এ অবস্থিত থাকবে যদি আমি ভুল না হই।

Comments

আপনি একটি অনুলিপি কমান্ড ব্যবহার করতে পারেন এবং এটি এনপিএম রান , গ্রান্ট টাস্ক বা গল্প টাস্কের মাধ্যমে কল করতে পারেন । এটি করার জন্য, আমাকে "নোড_মডিউলগুলি" (বিল্ডিং / স্থাপনার সময় কেবল "এনপিএম ইনস্টল" কল করুন) ডিরেক্টরিটি উত্সের দরকার নেই এবং আমি "। / Node_modules/bootstrap" এর পরিবর্তে "শৈলী / bootstrap.min.css" উল্লেখ করতে পারি can /bootstrap.min.css "।

— ইয়াহু আশীর্বাদ করুন

ফাইলগুলি অনুলিপি করার জন্য যদি কোনও খারাপ দিক থাকে তবে স্বাভাবিকভাবেই আপনার রেপোতে সেই নির্ভরতাগুলির দুটি কপি আপনার কাছে থাকবে। @ অগস্টো দ্বারা উল্লিখিত স্থিতিশীল পুনঃনির্দেশ পদ্ধতিটি আরও দক্ষ দেখায়।

— এস্তাপলস

Answer 4

1. আপনি যদি এটি পুনরায় সংকলন করতে চান / কম ফাইল / পরীক্ষা পরিবর্তন করতে চান তবে বুটস্ট্র্যাপ ইনস্টল করতে এনএমপি / বোভার ব্যবহার করুন। গ্রুট সঙ্গে এটি করা আরও সহজ হবে, যেমনটি http://getbootstrap.com/getting-st সূত্র /#grunt এ দেখানো হয়েছে । আপনি যদি কেবল প্রম্পম্পাইল্ড লাইব্রেরি যুক্ত করতে চান তবে ম্যানুয়ালি প্রজেক্টে ফাইল অন্তর্ভুক্ত করতে পারেন।

2. না, আপনাকে নিজের দ্বারা এটি করতে হবে বা পৃথক গ্রান্ট টুল ব্যবহার করতে হবে। উদাহরণস্বরূপ 'গ্রান্ট-কন্ট্রিবিউট-কনক্যাট' গ্রান্ট.জেএস (0.3.x) এর সাথে একাধিক সিএসএস এবং জাভাস্ক্রিপ্ট ফাইলগুলি কীভাবে সংযুক্ত করতে এবং মাইনাইফ করা যায়?