টাস্ক রানার্স (গুলপ, গ্রান্ট, ইত্যাদি) এবং বান্ডিলাররা (ওয়েবপ্যাক, ব্রাউজারফাই)। কেন একসাথে ব্যবহার?


117

আমি টাস্ক রানার এবং বান্ডলার বিশ্বে এবং নতুন কিছু করার সময় আমি কিছুটা নতুন

গ্রান্ট, গুল্প, ওয়েবপ্যাক, ব্রাউজারফাই

, আমি মনে করি না যে তাদের মধ্যে অনেক পার্থক্য রয়েছে। অন্য কথায়, আমি মনে করি যে ওয়েবপ্যাক কোনও টাস্ক রানার যা কিছু করতে পারে তা করতে পারে। তবে এখনও আমি একটি বিশাল উদাহরণ পেয়েছি যেখানে গুলপ এবং ওয়েবপ্যাক একসাথে ব্যবহৃত হয়। এর কারণটা আমি বের করতে পারলাম না।

এতে নতুন হওয়ার কারণে আমি জিনিসগুলিকে ভুল দিকে নিয়ে যাচ্ছি। আমি কী মিস করছি তা যদি আপনি চিহ্নিত করতে পারেন তবে দুর্দান্ত হবে। যে কোনও দরকারী লিঙ্ক স্বাগত।

আগাম ধন্যবাদ.

উত্তর:


226

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

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

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

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

আমার বিনীত মতে, আপনি এই প্রযুক্তিগুলির সাথে পরিচিত হতে চাইতে পারেন কারণ আপনার ক্যারিয়ারের সময় আপনি তাদের সমস্ত ব্যবহার (ব্যবহার) দেখতে পাবেন।


22
SO এর মধ্যে সেরা উত্তরগুলির মধ্যে একটি যা আমি কখনই পড়েছি এবং ঠিক আমি যা খুঁজছিলাম। ধন্যবাদ। কোনও ব্লগ পোস্টে লিখতে পারে?
আজব্রাস

1
ওয়েল এখানে আপনি প্রশংসনীয় ভাল ব্যাখ্যা পেতে পারেন - survivejs.com/webpack/appendices/comparison
Anshul

0

আমি সবেমাত্র আমার নিজের টাস্ক রানার / বান্ডলার তৈরি করেছি।

এটি গুল্প এবং সম্ভবত ওয়েবপ্যাকের চেয়ে সহজ ব্যবহারযোগ্য (যদিও আমি কখনও ওয়েবপ্যাক ব্যবহার করি নি)।

এটি খুব সহজ এবং বাকলটির বাইরে ব্যাবেল, ব্রাউজারিফাই, অগ্লিফাই, মিনিফাই এবং হ্যান্ডেলবার রয়েছে।

সিনট্যাক্সটি দেখতে এমন দেখাচ্ছে:

const Autumn = require("autumn-wizard");




const w = new Autumn();

//----------------------------------------
// CSS
//----------------------------------------
var cssFiles = [
    './lib/pluginABC/src/css/**/*.{css,scss}',
];
w.forEach(cssFiles, srcPath => {
    var dstPath = w.replace('/src/', '/dist/', srcPath);
    dstPath = w.replace('.scss', '.css', dstPath);
    dstPath = w.replace('.css', '.min.css', dstPath);
    w.minify(srcPath, dstPath, {
        sourceMap: useSourceMap,
    });
});


//----------------------------------------
// BUNDLE THE JS MODULE
//----------------------------------------
var srcPath = "./lib/pluginABC/src/main.js";
var dstPath = "./lib/pluginABC/dist/bundled.min.js";
w.bundle(srcPath, dstPath, {
    debug: useSourceMap,
});


//----------------------------------------
// CREATE THE HANDLEBARS TEMPLATES
//----------------------------------------
var tplPaths = [
    "./lib/pluginABC/src/templates/**/*.hbs",
];
dstPath = "./lib/pluginABC/dist/templates/bundled.js";
w.precompile(tplPaths, dstPath);


এবং দস্তাবেজটি এখানে রয়েছে: https://github.com/lingtalfi/ অটমুন

আশা করি এটি সাহায্য করবে।


লিঙ্গ: আমি ক্লাস এবং সমস্ত সময় "আমদানি" ব্যবহার করি। আপনার প্রকল্পটি কি আমদানি করা ফাইলগুলি ট্রান্সপ্লাই করে?
রবার্ট ওয়াইল্ডিং
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.