wake-up-neo.com

Was sind die Unterschiede zwischen SystemJS und Webpack?

Ich erstelle meine erste Angular-Anwendung, und ich würde herausfinden, welche Rolle die Modullader spielen. Warum brauchen wir sie? Ich habe versucht, bei Google zu suchen und zu suchen, und ich kann nicht verstehen, warum wir eine davon installieren müssen, um unsere Anwendung auszuführen.

Könnte es nicht ausreichen, einfach import zu verwenden, um Daten von Knotenmodulen zu laden?

Ich bin diesem Tutorial gefolgt (das SystemJS verwendet) und es macht mich dazu, systemjs.config.js-Datei zu verwenden:

/**
 * 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);

Warum brauchen wir diese Konfigurationsdatei?
Warum brauchen wir SystemJS (oder WebPack oder andere)?
Was ist Ihrer Meinung nach das Beste?

190
smartmouse

Wenn Sie zur SystemJS Github-Seite gehen, sehen Sie die Beschreibung des Tools:

Universeller dynamischer Modullader - lädt ES6-Module, AMD, CommonJS und globale Skripts in den Browser und NodeJS.

Da Sie Module in TypeScript oder ES6 verwenden, benötigen Sie einen Modullader. Im Fall von SystemJS können Sie mit systemjs.config.js die Art und Weise konfigurieren, in der die Modulnamen mit den entsprechenden Dateien abgeglichen werden.

Diese Konfigurationsdatei (und SystemJS) ist erforderlich, wenn Sie sie explizit zum Importieren des Hauptmoduls Ihrer Anwendung verwenden:

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

Wenn Sie TypeScript verwenden und den Compiler für das Modul commonjs konfigurieren, erstellt der Compiler Code, der nicht mehr auf SystemJS basiert. In diesem Beispiel würde die TypeScript-Compiler-Konfigurationsdatei folgendermaßen aussehen:

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

Webpack ist ein flexibler Modulbündler. Dies bedeutet, dass es weiter geht und nicht nur Module behandelt, sondern auch eine Möglichkeit bietet, Ihre Anwendung zu packen (Concat-Dateien, Dateien mit Uclify-Funktion, ...). Es bietet auch einen Dev-Server mit Load Reload für die Entwicklung

SystemJS und Webpack unterscheiden sich, aber mit SystemJS müssen Sie noch (zum Beispiel mit Gulp oder SystemJS Builder ) Ihre Angular2-Anwendung für die Produktion verpacken.

116

SystemJS arbeitet clientseitig. Es lädt die Module (Dateien) bei Bedarf dynamisch, wenn sie benötigt werden. Sie müssen nicht die gesamte App vorab laden. Sie könnten beispielsweise eine Datei in einen Button-Click-Handler laden.

SystemJS-Code:

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

Abgesehen von der Konfiguration für das Arbeiten ist das alles, was SystemJS bietet! Sie sind jetzt ein SystemJS-Profi!

Webpack ist völlig anders und braucht ewig zu meistern. Es macht nicht dasselbe wie SystemJS, aber bei Verwendung von Webpack wird SystemJS überflüssig.

Webpack bereitet eine einzige Datei mit dem Namen bundle.js vor. Diese Datei enthält alle HTML-, CSS-, JS-Dateien usw. Da alle Dateien in einer einzigen Datei zusammengefasst sind, ist jetzt kein Lazy Loader wie SystemJS mehr erforderlich (wobei einzelne Dateien Sind). werden nach Bedarf geladen).

Der Vorteil von SystemJS ist dieses faule Laden. Die App sollte schneller geladen werden, da nicht alles mit einem Treffer geladen wird.

Der Vorteil von Webpack ist, dass das Laden der App zwar einige Sekunden dauert, aber nach dem Laden und Zwischenspeichern sie blitzschnell ist.

Ich bevorzuge SystemJS, aber Webpack scheint trendiger zu sein.

Angular2 Quickstart verwendet SystemJS.

Angular CLI verwendet Webpack.

Webpack 2 (das Tree Shaking bietet) befindet sich in der Beta-Phase, daher ist es vielleicht nicht der richtige Zeitpunkt, um zu Webpack zu wechseln.

Hinweis: SystemJS implementiert den Standard zum Laden von ES6-Modulen . Webpack ist nur ein weiteres npm-Modul.

Task Runner (optionale Lektüre für diejenigen, die das Ökosystem verstehen möchten, in dem SystemJS möglicherweise existiert)

Mit SystemJS liegt die alleinige Verantwortung für das langsame Laden von Dateien, sodass noch etwas benötigt wird, um diese Dateien zu minimieren, umzuleiten (z. B. von SASS in CSS) usw. Diese erforderlichen Aufgaben werden als Aufgaben bezeichnet.

Wenn Webpack konfiguriert ist, wird dies für Sie korrekt ausgeführt (und die Ausgabe wird gebündelt). Wenn Sie etwas Ähnliches mit SystemJS machen möchten, verwenden Sie normalerweise einen JavaScript-Task-Runner. Der beliebteste Task Runner ist ein weiteres npm-Modul mit dem Namen gulp

So kann SystemJS beispielsweise faul eine minimierte JavaScript-Datei laden, die durch Schlupf minimiert wurde. Gulp kann, wenn es richtig eingerichtet ist, Dateien im laufenden Betrieb minimieren und live nachladen. Live-Nachladen ist die automatische Erkennung einer Codeänderung und eine automatische Aktualisierung des Browsers. Großartig während der Entwicklung. Mit CSS ist Live-Streaming möglich (d. H. Sie sehen, dass die Seite die neuen Stile aktualisiert, ohne dass die Seite überhaupt neu geladen wird).

Es gibt viele andere Aufgaben, die Webpack und Schluck ausführen können, die hier zu zahlreich wären. Ich habe ein Beispiel bereitgestellt :)

171
danday74

Bisher habe ich systemjs verwendet. Es wurden Dateien einzeln geladen, und das erste Laden dauerte 3-4 Sekunden, ohne dass die Dateien minimiert wurden. Nach dem Wechsel zum Webpack habe ich eine große Leistungsverbesserung erhalten. Jetzt müssen Sie nur noch eine Bundle-Datei laden (auch Polyfills und Vendor-Bibliotheken, die sich fast nie geändert haben und fast immer zwischengespeichert werden). Das Laden der clientseitigen App dauert nur eine Sekunde. Keine zusätzliche clientseitige Logik. Je geringer die Anzahl der geladenen Dateien ist, desto höher ist die Leistung. Wenn Sie systemjs verwenden, sollten Sie darüber nachdenken, Module dynamisch zu importieren, um Leistung zu sparen. Beim Webpack konzentrieren Sie sich hauptsächlich auf Ihre Logik, da die Leistung auch dann noch gut ist, wenn das Bundle minimiert und in Ihrem Browser zwischengespeichert ist.

0