SystemJS और Webpack में क्या अंतर हैं?

Question

मैं अपना पहला कोणीय अनुप्रयोग बना रहा हूं और मैं यह पता लगाऊंगा कि मॉड्यूल लोडर की भूमिका क्या है। हमें उनकी आवश्यकता क्यों है? मैंने Google पर खोज करने और खोजने का प्रयास किया और मुझे समझ नहीं आया कि हमें अपना एप्लिकेशन चलाने के लिए उनमें से एक को इंस्टॉल करने की आवश्यकता क्यों है?

क्या सिर्फ importनोड मॉड्यूल से सामान लोड करने के लिए पर्याप्त नहीं हो सकता है ?

मैंने इस ट्यूटोरियल का अनुसरण किया है (जो SystemJS का उपयोग करता है) और यह मुझे 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);

हमें इस कॉन्फ़िगरेशन फ़ाइल की आवश्यकता क्यों है?
हमें SystemJS (या वेबपैक या अन्य) की आवश्यकता क्यों है?
अंत में, आपकी राय में बेहतर क्या है?

Comments

यहां आप SystemJs (Jspm) की तुलना Webpack ilikekillnerds.com/2015/07/jspm-vs-webpack से करने के लिए वास्तव में अच्छा लेख पढ़ सकते हैं ।

— स्वेता

SystemJS के लिए यह उत्तर देखें stackoverflow.com/a/40670147/2545680

— Max Koretskyi

Answer 1

यदि आप SystemJS Github पृष्ठ पर जाते हैं, तो आपको उपकरण का विवरण दिखाई देगा:

यूनिवर्सल डायनेमिक मॉड्यूल लोडर - ब्राउज़र और NodeJS में ES6 मॉड्यूल, AMD, CommonJS और वैश्विक स्क्रिप्ट लोड करता है।

क्योंकि आप टाइपस्क्रिप्ट या ES6 में मॉड्यूल का उपयोग करते हैं, तो आपको एक मॉड्यूल लोडर की आवश्यकता होती है। SystemJS के मामले में, systemjs.config.jsहमें उस तरीके को कॉन्फ़िगर करने की अनुमति देता है जिसमें मॉड्यूल नाम उनकी संबंधित फ़ाइलों के साथ मेल खाते हैं।

यह कॉन्फ़िगरेशन फ़ाइल (और SystemJS) आवश्यक है यदि आप स्पष्ट रूप से इसका उपयोग अपने आवेदन के मुख्य मॉड्यूल को आयात करने के लिए करते हैं:

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

टाइपस्क्रिप्ट का उपयोग करते समय, और कंपाइलर को commonjsमॉड्यूल में कॉन्फ़िगर करने के लिए , कंपाइलर कोड बनाता है जो अब SystemJS पर आधारित नहीं है। इस उदाहरण में, टाइपस्क्रिप्ट कंपाइलर कॉन्फ़िगरेशन फ़ाइल इस तरह दिखाई देगी:

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

वेबपैक एक लचीला मॉड्यूल बंडल है। इसका मतलब यह है कि यह आगे बढ़ता है और न केवल मॉड्यूल को संभालता है, बल्कि आपके एप्लिकेशन को पैकेज करने का एक तरीका भी प्रदान करता है (कॉन्टेक्ट फाइल्स, फाइल्स को भुरभुरा करना, ...)। यह विकास के लिए लोड पुनः लोड के साथ एक देव सर्वर भी प्रदान करता है।

SystemJS और Webpack अलग हैं लेकिन SystemJS साथ, आप अभी भी (के साथ क्या करना काम है Gulp या SystemJS बिल्डर उदाहरण के लिए) के उत्पादन के लिए अपने Angular2 आवेदन पैकेज।

Comments

जब आप "SystemJS के साथ" कहते हैं, तब भी आपको अपने Angular2 एप्लिकेशन को प्रोडक्शन के लिए पैकेज देने के लिए (उदाहरण के लिए Gulp या SystemJS बिल्डर के साथ) काम करना होगा, जो वर्तमान में मेरे साथ है npm start?

— स्मार्टमॉ

वास्तव में, उत्पादन के लिए, मॉड्यूल (व्यक्तिगत फ़ाइलों (~ 300 अनुरोध) या बंडल (~ 40 अनुरोध)) के लिए बहुत सारी फ़ाइलों को लोड करना कुशल नहीं है। आपको बंडलों के वजन को कम करने के लिए सभी चीजों को एक या दो (आपके कोड और थर्ड-पार्टी लाइब्रेरी कोड) में इकट्ठा करना होगा, अपने टेम्पलेट्स (एनजीसी) और लीवरेज ट्री को हिलाना होगा। यह लेख आपको रूचि दे सकता है: blog.mgechev.com/2016/06/26/… । आपको सीएसएस फ़ाइलों को भी छोटा करना होगा।

— थिएरी टेम्पलियर

एनपीएम शुरू होने के साथ, आप "बस" एक सर्वर शुरू करते हैं जो मॉड्यूल के लिए आपके सिस्टमजेएस कॉन्फ़िगरेशन के आधार पर आपके आवेदन की सेवा करेगा ...

— थिएरी

Google आधिकारिक तौर पर वेबपैक में चला गया है। इसलिए मुझे लगता है कि समुदाय के अधिकांश लोग इसका इस्तेमाल करना बेहतर समझते हैं। मैं जल्द ही अपने सिस्टमजेज प्रोजेक्ट को वेबपैक पर माइग्रेट कर रहा हूं। हालांकि यह कैसे करना है पूरी तरह से निश्चित नहीं है।

— user2180794

@JonasKello कि कोणीय क्ली के लिए मामला है। इस लिंक को देखें: github.com/angular/angular-cli "वेबपैक अपडेट" अनुभाग में?

— थिएरी टेम्पलियर

Answer 2

SystemJS क्लाइंट साइड काम करता है। यह ज़रूरत पड़ने पर मॉड्यूल (फाइलों) को गतिशील रूप से मांग पर लोड करता है। आपको पूरे ऐप को सामने लोड नहीं करना है। आप एक फ़ाइल को लोड कर सकते हैं, उदाहरण के लिए, एक बटन क्लिक हैंडलर के अंदर।

SystemJS कोड:

// 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()
});

यह काम करने के लिए इसे कॉन्फ़िगर करने के अलावा, यह सब वहाँ SystemJS है! अब आप एक SystemJS समर्थक हैं!

वेबपैक पूरी तरह से अलग है और मास्टर करने के लिए हमेशा के लिए लेता है। यह SystemJS के समान काम नहीं करता है लेकिन, Webpack का उपयोग करते समय, SystemJS निरर्थक हो जाता है।

वेबपैक एक एकल फ़ाइल को तैयार करता है जिसे बंडल कहा जाता है। जेएस - इस फ़ाइल में सभी HTML, CSS, JS, आदि शामिल हैं क्योंकि सभी फाइलें एक ही फाइल में बंडल की जाती हैं, अब SystemJS जैसे (जहां अलग-अलग फाइलें लोड की जाती हैं, एक आलसी लोडर की जरूरत नहीं है जरूरत है)।

SystemJS का उल्टा यह आलसी लोडिंग है। ऐप को तेज़ी से लोड करना चाहिए क्योंकि आप एक हिट में सब कुछ लोड नहीं कर रहे हैं।

Webpack का उल्टा यह है कि, हालांकि ऐप को शुरू में लोड होने में कुछ सेकंड लग सकते हैं, एक बार लोड होने और कैश्ड होने के बाद यह तेजी से चमकता है।

मैं SystemJS पसंद करता हूं लेकिन वेबपैक ट्रेंडियर लगता है।

Angular2 Quickstart SystemJS का उपयोग करता है।

कोणीय सीएलआई वेबपैक का उपयोग करता है।

वेबपैक 2 (जो पेड़ को हिलाने की पेशकश करेगा) बीटा में है, इसलिए हो सकता है कि यह वेबपैक को स्थानांतरित करने का बुरा समय हो।

नोट SystemJS ES6 मॉड्यूल लोडिंग मानक को लागू कर रहा है । वेबपैक सिर्फ एक और एनपीएम मॉड्यूल है।

टास्क धावकों (जो पारिस्थितिकी तंत्र को समझना चाहते हैं, उनके लिए वैकल्पिक रीडिंग मौजूद हो सकती है)

SystemJS के साथ इसकी एकमात्र ज़िम्मेदारी फाइलों की आलसी लोडिंग है, इसलिए उन फ़ाइलों को छोटा करने के लिए अभी भी कुछ आवश्यक है, उन फ़ाइलों को ट्रांसपाइल करें (जैसे SASS से CSS), आदि ये कार्य जो ज़रूर किए जाने चाहिए, कार्यों के रूप में जाने जाते हैं ।

Webpack, जब कॉन्फ़िगर किया जाता है, तो यह आपके लिए सही ढंग से करता है (और आउटपुट को एक साथ बंडल करता है)। यदि आप SystemJS के साथ कुछ ऐसा ही करना चाहते हैं, तो आप आमतौर पर एक जावास्क्रिप्ट कार्य धावक का उपयोग करेंगे। सबसे लोकप्रिय टास्क रनर एक और npm मॉड्यूल है जिसे gulp कहा जाता है ।

इसलिए, उदाहरण के लिए, SystemJS एक संक्षिप्त जावास्क्रिप्ट फ़ाइल को लोड कर सकता है जिसे gulp द्वारा छोटा किया गया है। सही तरीके से सेटअप होने पर, फ्लाई और लाइव रीलोड पर फ़ाइलों को छोटा कर सकता है। लाइव रीलोडिंग एक कोड परिवर्तन की स्वचालित पहचान है और अपडेट करने के लिए एक स्वचालित ब्राउज़र ताज़ा है। विकास के दौरान महान। CSS के साथ, लाइव स्ट्रीमिंग संभव है (अर्थात आप पृष्ठ को फिर से लोड किए बिना नई शैलियों को अपडेट करते हुए देखते हैं)।

कई अन्य कार्य हैं जो वेबपैक और गल्प प्रदर्शन कर सकते हैं जो यहां कवर करने के लिए बहुत अधिक होंगे। मैंने एक उदाहरण प्रदान किया है :)

Comments

मुझे भी WebJ की तुलना में SystemJS और JSPM काम करने में बहुत आसान लगे। इसके अलावा, मैंने प्रोडक्शन बंडल को छोटा पाया (एक अन्य वेबपैक उदाहरण परियोजना के साथ तुलना में)। यहाँ इस विषय के बारे में मेरी पोस्ट है: stackoverflow.com/questions/40256204/…

— पीटर सालोमोनसेन

आप उपयोग करने के साथ Webpack और आलसी लोडिंग का उपयोग कर सकते हैं angular2-router-loader। अधिक देखें medium.com/@daviddentoom/...

— एलेक्स क्लाउस

आप Webpack के बारे में गलत हैं! यह आपको आलसी लोडिंग के साथ बंडलिंग को संयोजित करने की अनुमति देता है। इसके अलावा, यह पारदर्शी रूप से चूजों में आस्थगित मॉड्यूल को बंडल करता है।

— dizel3d

उदाहरण के लिए @AlexKlaus धन्यवाद! मैं कुछ इस तरह की तलाश कर रहा था :)

— tftd

"वेबपैक पूरी तरह से अलग है और मास्टर करने के लिए हमेशा के लिए लेता है। यह सिस्टमजेएस के समान काम नहीं करता है लेकिन, वेबपैक का उपयोग करते समय, सिस्टमजेड निरर्थक हो जाता है।" मैं असहमत हूँ। SystemJS अभी भी लगातार हर बदलाव के लिए निर्माण के बिना देव विकास की अनुमति देता है। मैं एक TS फ़ाइल में बदलाव कर सकता हूं, सहेज सकता हूं (जो स्वचालित रूप से tsc.exe को कॉल करेगा और इसका निर्माण करेगा), फिर मेरे पृष्ठ को फिर से लोड करें और कोई समस्या न हो। वेबपैक के साथ, मुझे पुनर्निर्माण करना होगा जो काफी लंबा समय ले सकता है क्योंकि यह सब कुछ फिर से बनाएगा और निर्माण करेगा । मैं वेबपैक का उपयोग करने से बचने का कोई तरीका नहीं ढूंढ सका हूं।

— पोलेंटारिस

Answer 3

अब तक मैं सिस्टमज का इस्तेमाल कर रहा था। यह एक-एक करके फाइलें लोड कर रहा था और पहला लोड बिना मिनिफाइज्ड फाइलों के 3-4 सेकंड ले रहा था। वेबपैक पर स्विच करने के बाद मुझे एक शानदार प्रदर्शन में सुधार मिला। अब यह केवल एक बंडल फाइल को लोड करने के लिए लेता है (यह भी पॉलीफ़िल और विक्रेता के लिबास जो लगभग कभी नहीं बदले और लगभग हमेशा कैश्ड होते हैं) और यही है। अब क्लाइंट साइड ऐप को लोड करने में सिर्फ एक सेकंड लगता है। कोई अतिरिक्त ग्राहक पक्ष तर्क नहीं। प्रदर्शन के रूप में लोड की गई व्यक्तिगत फ़ाइलों की संख्या जितनी कम हो। Systemjs का उपयोग करते समय आपको प्रदर्शन में बचाने के लिए गतिशील रूप से मॉड्यूल आयात करने के बारे में सोचना चाहिए। वेबपैक के साथ आप अपने लॉजिक पर मुख्य रूप से ध्यान केंद्रित करते हैं क्योंकि आपके ब्राउज़र में बंडल को छोटा और कैश्ड करने के बाद भी प्रदर्शन अच्छा रहेगा।

Comments

आपने केवल ओपी के सवालों में से एक का जवाब दिया, बेहतर होगा कि आप टिप्पणी करें।

— बेन