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은 유연한 모듈 번 들러입니다. 이것은 더 나아가 모듈을 처리 할뿐만 아니라 응용 프로그램 (concat 파일, uglify 파일 등)을 패키지하는 방법을 제공한다는 것을 의미합니다. 또한 개발을 위해로드 재로드와 함께 개발 서버를 제공합니다.

SystemJS와 Webpack은 다르지만 SystemJS를 사용하면 프로덕션을 위해 Angular2 애플리케이션을 패키지화하기 위해 여전히 작업해야합니다 ( 예 : Gulp 또는 SystemJS 빌더 ).

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가 중복됩니다.

Webpack은 bundle.js라는 단일 파일을 준비합니다.이 파일에는 모든 HTML, CSS, JS 등이 포함됩니다. 모든 파일이 단일 파일에 번들로 제공되므로 SystemJS와 같은 지연 로더가 필요하지 않습니다 (개별 파일이 다음과 같이로드 됨). 필요).

SystemJS의 장점은이 게으른 로딩입니다. 한 번에 모든 것을로드하지 않기 때문에 앱이 더 빨리로드됩니다.

Webpack의 장점은 앱이 처음로드하는 데 몇 초가 걸리지 만 일단로드되고 캐시되면 번개가 빠르다는 것입니다.

SystemJS를 선호하지만 Webpack은 최신 유행 인 것 같습니다.

Angular2 빠른 시작은 SystemJS를 사용합니다.

Angular CLI는 Webpack을 사용합니다.

Webpack 2 (트리 쉐이킹 기능 제공)는 베타 버전이므로 Webpack으로 전환하기가 매우 어려울 수 있습니다.

참고 SystemJS는 ES6 모듈 로딩 표준을 구현하고 있습니다 . Webpack은 또 다른 npm 모듈입니다.

작업 러너 (SystemJS가 존재할 수있는 생태계를 이해하려는 사람들을위한 선택적인 판독 값)

SystemJS으로 단독 책임 등을 수행해야합니다 이러한 작업은 다음과 같이 알려져있다 뭔가가 여전히 (예 : SASS에서 CSS에) 해당 파일을 transpile, 해당 파일을 작게를 위해 필요한되도록 파일의 게으른 로딩입니다 작업 .

웹팩은 구성 될 때이를 올바르게 수행하고 출력을 함께 묶습니다. SystemJS와 비슷한 작업을 수행하려면 일반적으로 JavaScript 태스크 실행기를 사용하십시오. 가장 인기있는 작업 주자라는 또 다른 NPM 모듈입니다 꿀꺽 .

예를 들어, SystemJS는 gulp에 의해 축소 된 축소 된 JavaScript 파일을 지연로드 할 수 있습니다. Gulp는 올바르게 설정되면 파일을 즉시 축소하고 실시간으로 다시로드 할 수 있습니다. 실시간 새로 고침은 코드 변경을 자동 감지하고 자동 브라우저를 새로 고침하여 업데이트합니다. 개발 중에 좋습니다. CSS를 사용하면 라이브 스트리밍이 가능합니다 (즉, 페이지를 다시로드하지 않고도 페이지가 새로운 스타일을 업데이트하는 것을 볼 수 있습니다).

Webpack과 gulp가 수행 할 수있는 다른 많은 작업이 있으며 여기에는 다루기가 너무 많습니다. 나는 예를 제공했다 :)

지금까지 systemjs를 사용하고있었습니다. 파일을 하나씩로드하는 중이고 첫 번째로드는 축소 된 파일없이 3-4 초가 걸렸습니다. 웹팩으로 전환 한 후 성능이 크게 향상되었습니다. 이제는 하나의 번들 파일 (거의 절대 변경되지 않고 거의 항상 캐시 된 polyfill 및 공급 업체 라이브러리) 만로드하면됩니다. 이제 클라이언트 측 앱을로드하는 데 1 초 밖에 걸리지 않습니다. 추가 클라이언트 측 로직이 없습니다. 로드 된 개별 파일 수가 적을수록 성능이 향상됩니다. systemjs를 사용할 때 성능을 절약하기 위해 동적으로 모듈을 가져 오는 것을 고려해야합니다. webpack을 사용하면 번들이 축소되고 브라우저에 캐시 된 후에도 성능이 여전히 좋기 때문에 주로 논리에 중점을 둡니다.