সিস্টেমজেএস এবং ওয়েবপ্যাকের মধ্যে পার্থক্য কী?

Question

আমি আমার প্রথম কৌণিক অ্যাপ্লিকেশন তৈরি করছি এবং আমি মডিউল লোডারগুলির ভূমিকা কী তা বুঝতে পারি। আমাদের কেন তাদের দরকার? আমি গুগলে অনুসন্ধান এবং অনুসন্ধান করার চেষ্টা করেছি এবং আমি বুঝতে পারি না কেন আমাদের অ্যাপ্লিকেশনটি চালানোর জন্য আমাদের সেগুলির একটি ইনস্টল করা দরকার?

importনোড মডিউলগুলি থেকে স্টাফ লোড করার জন্য কি যথেষ্ট পরিমাণে ব্যবহার করা যায় না?

আমি এই টিউটোরিয়ালটি অনুসরণ করেছি (এটি সিস্টেমজেএস ব্যবহার করে) এবং এটি আমাকে systemjs.config.jsফাইল ব্যবহার করতে বাধ্য করে:

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'transpiled', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'forms',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];
  // Individual files (~300 requests):
  function packIndex(pkgName) {
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
  }
  // Bundled (~40 requests):
  function packUmd(pkgName) {
    packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
  }
  // Most environments should use UMD; some (Karma) need the individual index files
  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
  // Add package entries for angular packages
  ngPackageNames.forEach(setPackageConfig);
  var config = {
    map: map,
    packages: packages
  };
  System.config(config);
})(this);

আমাদের এই কনফিগারেশন ফাইলটি কেন দরকার?
আমাদের কেন সিস্টেমজেএস (বা ওয়েবপ্যাক বা অন্য) দরকার?
অবশেষে, আপনার মতে আরও ভাল কি?

Comments

ওয়েবপ্যাক ilikekillnerds.com/2015/07/jspm-vs-webpack এর সাথে SystemJs (Jspm) এর তুলনা করতে আপনি এখানে সত্যিই ভাল নিবন্ধটি পড়তে পারেন ।

— সোয়েতা

এই উত্তরটি দেখুন stackoverflow.com/a/40670147/2545680 SystemJS জন্য

— সর্বাধিক Koretskyi

Answer 1

আপনি যদি সিস্টেমজেএস গিথুব পৃষ্ঠায় যান, আপনি সরঞ্জামটির বিবরণ দেখতে পাবেন:

ইউনিভার্সাল ডায়নামিক মডিউল লোডার - ব্রাউজার এবং নোডজেএসে ES6 মডিউল, এএমডি, কমনজেএস এবং গ্লোবাল স্ক্রিপ্টগুলি লোড করে।

আপনি টাইপস্ক্রিপ্ট বা ES6 এ মডিউলগুলি ব্যবহার করার কারণে আপনার একটি মডিউল লোডার প্রয়োজন। সিস্টেমজেএস-এর ক্ষেত্রে, systemjs.config.jsমডিউলটির সাথে সম্পর্কিত ফাইলগুলির সাথে মডিউলটির নামগুলি কীভাবে মেলানো যায় তা আমাদের কনফিগার করতে দেয়।

আপনি যদি আপনার অ্যাপ্লিকেশনটির মূল মডিউলটি আমদানি করতে স্পষ্টভাবে ব্যবহার করেন তবে এই কনফিগারেশন ফাইলটি (এবং সিস্টেমজেএস) প্রয়োজনীয়:

<script>
  System.import('app').catch(function(err){ console.error(err); });
</script>

টাইপস্ক্রিপ্ট ব্যবহার করার সময় এবং commonjsমডিউলে সংকলকটি কনফিগার করার সময় , সংকলক কোড তৈরি করে যা আর সিস্টেমজেএস-এর উপর ভিত্তি করে নেই। এই উদাহরণে, টাইপ স্ক্রিপ্ট সংকলক কনফিগার ফাইলটি এরকম প্রদর্শিত হবে:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs", // <------
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}

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

সিস্টেমজেএস এবং ওয়েবপ্যাক পৃথক হলেও সিস্টেমজেএস-এর সাথে আপনার উত্পাদনের জন্য আপনার অ্যাংুলার 2 অ্যাপ্লিকেশনটি প্যাকেজ করার জন্য এখনও কাজ করতে হবে ( উদাহরণস্বরূপ গুলপ বা সিস্টেমজেএস বিল্ডারের সাথে ) to

Comments

আপনি যখন "সিস্টেমজেএস এর সাথে বলবেন, তখনও আপনার কাজ করতে হবে (উদাহরণস্বরূপ গুল্প বা সিস্টেমজেএস নির্মাতার সাথে) আপনার অ্যাঙ্গুলার 2 অ্যাপ্লিকেশনটির জন্য প্যাকেজ করার জন্য" আমি বর্তমানে যা পাচ্ছি তা কি npm start?

— স্মার্টমাউস

প্রকৃতপক্ষে, উত্পাদনের জন্য, মডিউলগুলির জন্য প্রচুর ফাইল লোড করা দক্ষ নয় (স্বতন্ত্র ফাইল (~ 300 অনুরোধ) বা বান্ডিলযুক্ত (~ 40 অনুরোধ)। বান্ডেলের ওজন হ্রাস করার জন্য আপনাকে সমস্ত কিছু এক বা দুটি (আপনার কোড এবং তৃতীয় পক্ষের লাইব্রেরি কোড) এ সংগ্রহ করতে হবে, আপনার টেমপ্লেটগুলি (এনজিসি) অফলাইনে সংকলন করতে হবে এবং বৃক্ষের কাঁপুনের ঝাঁকুনি দিতে হবে। এই নিবন্ধটি আপনার আগ্রহী হতে পারে: blog.mgechev.com/2016/06/26/… । আপনার সিএসএস ফাইলগুলিও অগলিফাই করতে হবে।

— থিয়েরি টেম্পিলার

এনপিএম স্টার্ট সহ, আপনি "সহজভাবে" একটি সার্ভার শুরু করেন যা মডিউলগুলির জন্য আপনার সিস্টেমজেএস কনফিগারেশনের উপর ভিত্তি করে আপনার অ্যাপ্লিকেশনটি পরিবেশন করবে ...

— থিয়েরি

গুগল আনুষ্ঠানিকভাবে ওয়েবপ্যাকে চলে গেছে। সুতরাং আমি অনুমান করি যে সম্প্রদায়ের বেশিরভাগ অংশ ব্যবহার করবে with আমি শীঘ্রই আমার সিস্টেমজেএস প্রকল্পটি ওয়েবপ্যাকে স্থানান্তরিত করছি। এটি কীভাবে করবেন তা সম্পূর্ণ নিশ্চিত নয় Not

— ব্যবহারকারী 2180794

@ জোনাসকেলো এটিই কৌণিক ক্লাইপের ক্ষেত্রে। এই লিঙ্কটি দেখুন: github.com/angular/angular-cli বিভাগে "ওয়েবপ্যাক আপডেট"?

— থিয়েরি টেম্পিলার

Answer 2

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

সিস্টেমজেএস কোড:

// example import at top of file
import myModule from 'my-module'
myModule.doSomething()

// example dynamic import (could be placed anywhere in your code)
// module not loaded until code is hit
System.import('my-module').then((myModule) {
  // myModule is available here
  myModule.doSomething()
});

এটির কাজটি কনফিগার করা ব্যতীত, সিস্টেমজেএস-এ যা আছে! আপনি এখন একটি সিস্টেমজেএস প্রো!

ওয়েবপ্যাক সম্পূর্ণ আলাদা এবং মাস্টার হিসাবে চিরকাল লাগে takes এটি সিস্টেমজেএসের মতো একই কাজ করে না তবে ওয়েবপ্যাক ব্যবহার করার সময়, সিস্টেমজেএস অপ্রয়োজনীয় হয়ে যায়।

ওয়েবপ্যাকটি বান্ডেল.জেএস নামে একটি একক ফাইল প্রস্তুত করে - এই ফাইলটিতে সমস্ত এইচটিএমএল, সিএসএস, জেএস ইত্যাদি রয়েছে কারণ সমস্ত ফাইল একক ফাইলে বান্ডিল হয়ে গেছে, এখন সিস্টেমজেএসের মতো অলস লোডারের প্রয়োজন নেই (যেখানে পৃথক ফাইলগুলি লোড করা হয়) প্রয়োজন)।

সিস্টেমজেএসের উত্সাহটি এই অলস লোডিং। অ্যাপটিকে দ্রুত লোড করা উচিত কারণ আপনি এক হিট-এ সমস্ত কিছু লোড করছেন না।

ওয়েবপ্যাকের বিপরীত দিকটি হ'ল, যদিও অ্যাপ্লিকেশনটিকে প্রাথমিকভাবে লোড হতে কয়েক সেকেন্ড সময় লাগতে পারে, একবার লোড করা এবং ক্যাশে হওয়া এটি দ্রুত বজ্রপাত হয়।

আমি সিস্টেমজেএস পছন্দ করি তবে ওয়েবপ্যাকটি ট্রেন্ডার বলে মনে হচ্ছে।

অ্যাঙ্গুলার 2 কুইকস্টার্ট সিস্টেমজেএস ব্যবহার করে।

কৌণিক সিএলআই ওয়েবপ্যাক ব্যবহার করে।

ওয়েবপ্যাক 2 (যা গাছের কাঁপানোর প্রস্তাব দেবে) বিটাতে রয়েছে তাই ওয়েবপ্যাকে যাওয়ার জন্য এটি খারাপ সময় হতে পারে।

নোট SystemJS বাস্তবায়ন করছে ES6 মডিউল লোড মান । ওয়েবপ্যাকটি আর একটি এনপিএম মডিউল।

টাস্ক রানার্স (যারা বাস্তুতন্ত্র বুঝতে চান তাদের জন্য readingচ্ছিক পাঠ্য যেখানে সিস্টেমজেএস থাকতে পারে)

SystemJS সঙ্গে তার একমাত্র দায়িত্ব ফাইল এখনও কিছু ঐ ফাইল অল্প করা হয়, ঐ ফাইল transpile প্রয়োজন হয়, যাতে (যেমন Sass থেকে CSS এ) -এর অলস লোড ইত্যাদি.এই কাজ যে অবশ্যই করতে হবে নামে পরিচিত হয় কর্ম ।

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

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

আরও অনেক কাজ রয়েছে যা ওয়েবপ্যাক এবং গল্প সম্পাদন করতে পারে যা এখানে আচ্ছাদন করার মতো অনেক বেশি। আমি একটি উদাহরণ প্রদান করেছি :)

Comments

আমাকেও আমি ওয়েবজেটের চেয়ে সিস্টেমজেএস এবং জেএসপিএমের সাথে কাজ করা আরও সহজ মনে করি। এছাড়াও আমি দেখতে পেয়েছি প্রোডাকশন বান্ডিলগুলি ছোট হতে পারে (অন্য ওয়েবপ্যাক উদাহরণ প্রকল্পের সাথে তুলনা করা)। বিষয়টি সম্পর্কে আমার পোস্টটি এখানে: stackoverflow.com/questions/40256204/…

— পিটার সালমনসনসন

আপনি ব্যবহার করে ওয়েবপ্যাক এবং অলস লোডিং ব্যবহার করতে পারেন angular2-router-loader। আরও मध्यम.com

— অ্যালেক্স ক্লাউস

আপনি ওয়েবপ্যাক সম্পর্কে ভুল! এটি আপনাকে অলস লোডিংয়ের সাথে বান্ডিলিং একত্রিত করতে দেয়। তদ্ব্যতীত, এটি স্বচ্ছভাবে স্থগিত মডিউলগুলি খণ্ডগুলিতে বান্ডিল করে।

— dizel3d

@ উদাহরণস্বরূপ অ্যালেক্সক্লাউসকে ধন্যবাদ! আমি এরকম কিছু

— খুঁজছিলাম

"ওয়েবপ্যাক সম্পূর্ণ আলাদা এবং মাস্টার হিসাবে চিরতরে লাগে System এটি সিস্টেমজেএস এর মতো কাজ করে না তবে ওয়েবপ্যাক ব্যবহার করার সময় সিস্টেমজেএস অপ্রয়োজনীয় হয়ে যায়।" আমার দ্বিমত আছে সিস্টেমজেএস এখনও নিয়মিত প্রতিটি পরিবর্তনের জন্য তৈরি না করেই ডেভ বিকাশের অনুমতি দেয়। আমি একটি টিএস ফাইলে পরিবর্তন করতে পারি, সংরক্ষণ করতে পারি (যা স্বয়ংক্রিয়ভাবে tsc.exe কল করে এটি তৈরি করবে), তারপরে আমার পৃষ্ঠাটি পুনরায় লোড করুন এবং কোনও সমস্যা নেই। ওয়েবপ্যাকের সাহায্যে আমাকে পুনর্নির্মাণ করতে হবে যা উল্লেখযোগ্যভাবে বেশি সময় নিতে পারে কারণ এটি সবকিছু পুনরায় সংকলন এবং তৈরি করবে । ওয়েবপ্যাকটি ব্যবহার করে এড়াতে আমি কোনও উপায় খুঁজে পাচ্ছি না।

— পোলান্টারিস

Answer 3

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

Comments

আপনি কেবল ওপি-র একটি প্রশ্নের উত্তর দিয়েছেন, মন্তব্য করার চেয়ে ভাল হত।

— বেন