web-dev-qa-db-ja.com

SystemJSとWebpackの違いは何ですか？

私は私の最初のAngularアプリケーションを作成しています、そして私はモジュールローダーの役割が何であるか把握するでしょう。なぜ私たちはそれらを必要としますか？ Googleで検索して検索しようとしましたが、アプリケーションを実行するためにそのうちの1つをインストールする必要があるのは理解できません。

ノードモジュールからものをロードするために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（またはWebPackなど）が必要なのですか？
最後に、あなたの意見では何が良いのですか？

angularwebpacksystemjsnode-modules
198
smartmouse

SystemJS Githubページに移動すると、ツールの説明が表示されます。

ユニバーサルダイナミックモジュールローダー - ES6モジュール、AMD、CommonJS、およびグローバルスクリプトをブラウザとNodeJSにロードします。

TypeScriptまたはES6でモジュールを使用するので、モジュールローダーが必要です。 SystemJSの場合、systemjs.config.jsを使用すると、モジュール名とそれに対応するファイルを照合する方法を設定できます。

この設定ファイル（およびSystemJS）は、アプリケーションのメインモジュールをインポートするために明示的に使用する場合に必要です。

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

TypeScriptを使用し、コンパイラをcommonjsモジュールに設定すると、コンパイラはSystemJSに基づいていないコードを作成します。この例では、TypeScriptコンパイラの設定ファイルは次のようになります。

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

Webpackは柔軟なモジュールバンドラーです。つまり、モジュールを扱うだけでなく、アプリケーションをパッケージ化する方法（concatファイル、uglifyファイルなど）も提供されます。開発用のロードリロードを備えた開発サーバーも提供します。

SystemJSとWebpackは異なりますが、SystemJSでは、Angular2アプリケーションを本番用にパッケージ化するために、（ Gulp または SystemJSビルダー を使用するなど）作業が必要です。

118
Thierry Templier

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プロです！

Webpackはまったく異なり、習得するのに永遠にかかります。 SystemJSと同じことはしませんが、Webpackを使用すると、SystemJSが冗長になります。

Webpackはbundle.jsと呼ばれる単一のファイルを用意します - このファイルにはすべてのHTML、CSS、JSなどが含まれています。すべてのファイルが単一のファイルにまとめられているので必要）。

SystemJSの利点は、この遅延ロードです。あなたは一撃ですべてをロードしていないので、アプリはより速くロードするはずです。

Webpackの利点は、アプリが最初に読み込まれるまで数秒かかることがありますが、一度読み込まれてキャッシュされると、非常に速いことです。

私はSystemJSを好みますが、Webpackは流行しているようです。

Angular 2クイックスタートはSystemJSを使用します。

Angular CLIはWebpackを使用します。

Webpack 2（これは木の揺れをもたらすでしょう）はベータ版ですので、Webpackに移行するのは悪い時期かもしれません。

注意SystemJSは ES6モジュールローディング標準 を実装しています。 Webpackはもうひとつのnpmモジュールです。

タスクランナー（SystemJSが存在する可能性があるエコシステムを理解したい人のためのオプションの読み方）

SystemJSの唯一の責任はファイルの遅延ロードであるため、それらのファイルを縮小したり（SASSからCSSに）転送したりするために何かが必要です。これらの仕事は tasks として知られています。

Webpackは、設定されていれば、これを正しく行います（そして出力をまとめます）。 SystemJSと似たようなことをしたい場合は、通常、JavaScriptのタスクランナーを使用します。最も人気のあるタスクランナーは gulp と呼ばれるもう一つのnpmモジュールです。

たとえば、SystemJSはgulpによって縮小された縮小されたJavaScriptファイルを遅延ロードします。 Gulpは、正しく設定されていれば、ファイルをその場で縮小してライブリロードすることができます。ライブリロードは、コード変更の自動検出と更新のための自動ブラウザ更新です。開発中に最適です。 CSSでは、ライブストリーミングが可能です（つまり、ページを再読み込みしなくてもページが新しいスタイルを更新するのがわかります）。

Webpackとgulpが実行できるタスクは他にもたくさんありますが、ここで説明するにはあまりにも多くなります。例を挙げました:)

174
danday74

これまではsystemjsを使っていました。それはファイルを一つずつロードしていました、そして、最初のロードは縮小されたファイルなしで3-4秒かかりました。ウェブパックに切り替えた後、私はパフォーマンスが大きく向上しました。 1つのバンドルファイル（ほとんど変更されず、ほとんど常にキャッシュされているpolyfillsおよびベンダのライブラリも）をロードするだけで済みます。これで、クライアントサイドアプリケーションをロードするのにわずか1秒かかります。追加のクライアント側ロジックはありません。ロードされる個々のファイルの数が少ないほど、パフォーマンスは向上します。 systemjsを使うときは、パフォーマンスを向上させるために動的にモジュールをインポートすることを考えるべきです。 Webpackでは、バンドルが縮小されてブラウザにキャッシュされてもパフォーマンスは依然として良好になるため、主にロジックに焦点を当てています。

1
Hrach Gyulzadyan