[解決済み】SystemJSとWebpackの違いは何ですか？

質問

初めてのAngularアプリケーションを作成していますが、モジュールローダーの役割とは何でしょうか？ なぜそれが必要なのでしょうか？ 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（またはWebPackやその他）が必要なのか？

最後に、あなたの意見として、何がより良いのでしょうか？

解決方法は？

SystemJSのGithubページにアクセスすると、ツールの説明が表示されます。

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

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は柔軟なモジュールバンドルラーです。つまり、モジュールを扱うだけでなく、アプリケーションをパッケージ化する方法（ファイルの連結、ファイルのUGL化、...）も提供します。また、開発のためのロードリロードを備えた開発サーバも提供します。

SystemJSとWebpackは別物ですが、SystemJSの場合、まだやることがあります(with ガルパ または SystemJSビルダー など)を使って、Angular2アプリケーションを本番用にパッケージングします。