SystemJS ve Webpack arasındaki farklar nelerdir?

İlk Açısal uygulamamı oluşturuyorum ve modül yükleyicilerin rolünün ne olduğunu anlıyorum. Neden onlara ihtiyacımız var? Google'da arama yapmaya ve arama yapmaya çalıştım ve uygulamamızı çalıştırmak için neden birini yüklememiz gerektiğini anlayamıyorum?

Sadece importdüğüm modüllerinden malzeme yüklemek için kullanmak yeterli olmaz mı?

Ben takip ettim bu öğretici (kullanımları SystemJS o) ve bu beni kullanmayı kolaylaştırır systemjs.config.jsdosyasını:

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

Neden bu yapılandırma dosyasına ihtiyacımız var?
Neden SystemJS'ye (veya WebPack veya diğerlerine) ihtiyacımız var?
Son olarak, sizce daha iyi olan nedir?

SystemJS Github sayfasına giderseniz, aracın açıklamasını göreceksiniz:

Evrensel dinamik modül yükleyici - tarayıcıya ve NodeJS'ye ES6 modüllerini, AMD, CommonJS ve global komut dosyalarını yükler.

TypeScript veya ES6'da modüller kullandığınız için bir modül yükleyiciye ihtiyacınız vardır. SystemJS söz konusu olduğunda, systemjs.config.jsmodül adlarının karşılık gelen dosyalarla eşleşme şeklini yapılandırmamıza izin verir.

Bu yapılandırma dosyası (ve SystemJS), uygulamanızın ana modülünü içe aktarmak için açıkça kullanırsanız gereklidir:

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

TypeScript kullanırken ve derleyiciyi commonjsmodüle yapılandırırken, derleyici artık SystemJS'ye dayalı olmayan bir kod oluşturur. Bu örnekte, typescript derleyici yapılandırma dosyası şu şekilde görünecektir:

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

Webpack esnek bir modül paketleyicisidir. Bu, daha da ileri gittiği ve sadece modülleri işlemekle kalmayıp aynı zamanda uygulamanızı paketlemek için bir yol da sağladığı anlamına gelir (concat dosyaları, dosyaları çirkinleştir, ...). Ayrıca geliştirme için yük yeniden yükleme ile bir dev sunucusu sağlar.

SystemJS ve Webpack farklıdır, ancak SystemJS ile Angular2 uygulamanızı üretim için paketlemek için hala ( örneğin Gulp veya SystemJS oluşturucu ile) yapacak çalışmalarınız vardır.

SystemJS istemci tarafında çalışır. Gerektiğinde modülleri (dosyaları) istek üzerine dinamik olarak yükler. Tüm uygulamayı öne yüklemeniz gerekmez. Örneğin, bir düğme tıklama işleyicisinin içine bir dosya yükleyebilirsiniz.

SystemJS kodu:

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

Çalıştırmak için yapılandırmak dışında, SystemJS'de hepsi bu kadar! Artık bir SystemJS uzmanısınız!

Webpack tamamen farklıdır ve ustalaşması sonsuza dek sürer. SystemJS ile aynı şeyi yapmaz, ancak Webpack'i kullanırken SystemJS gereksiz hale gelir.

Webpack bundle.js adlı tek bir dosya hazırlar - Bu dosya tüm HTML, CSS, JS vb. İçerir gerekli).

SystemJS'nin üst kısmı bu tembel yüklemedir. Her şeyi tek bir vuruşta yüklemediğiniz için uygulama daha hızlı yüklenmelidir.

Webpack'in üst tarafı, uygulamanın başlangıçta yüklenmesi birkaç saniye sürebilir, ancak yüklendikten ve önbelleğe alındıktan sonra hızlı bir şekilde yıldırım.

SystemJS'yi tercih ediyorum ama Webpack daha trend görünüyor.

Angular2 hızlı başlatma SystemJS kullanır.

Açısal CLI Webpack kullanır.

Webpack 2 (ağaç sallama sunacak) beta sürümündedir, bu yüzden Webpack'e geçmek için kötü bir zaman olabilir.

Not SystemJS, ES6 modülü yükleme standardını uygulamaktadır . Webpack başka bir npm modülüdür.

Görev koşucuları (SystemJS'nin bulunabileceği ekosistemi anlamak isteyenler için isteğe bağlı okuma)

SystemJS ile tamamen kendi sorumluluğu vb yapılmalıdır Bu işler olarak bilinir hala bir şey (örneğin SUKDÖ'nün gelen CSS) bu dosyaları transpile, bu dosyaları küçültmek için gereklidir, böylece dosyaların tembel yükleme, olduğu görevleri .

Webpack, yapılandırıldığında bunu sizin için doğru şekilde yapar (ve çıktıyı bir araya toplar). SystemJS ile benzer bir şey yapmak isterseniz, genellikle bir JavaScript görev çalıştırıcısı kullanırsınız. En popüler görev koşucu adlı başka npm modülüdür yudum .

Bu nedenle, örneğin, SystemJS gulp tarafından küçültülmüş küçültülmüş bir JavaScript dosyasını tembel olarak yükleyebilir. Gulp, doğru kurulduğunda, dosyaları anında küçültebilir ve canlı yeniden yükleyebilir. Canlı yeniden yükleme, bir kod değişikliğinin otomatik olarak algılanması ve güncellenmesi için otomatik tarayıcı yenilemesidir. Geliştirme sırasında harika. CSS ile canlı akış mümkündür (yani, sayfanın, yeniden yüklenmeden yeni stilleri güncellediğini görürsünüz).

Webpack ve gulp'in gerçekleştirebileceği çok sayıda görev vardır ve bunlar burada ele alınamayacak kadar çoktur. Bir örnek verdim :)

Şimdiye kadar systemjs kullanıyordum. Dosyaları tek tek yüklüyordu ve ilk yükleme, küçültülmüş dosyalar olmadan 3-4 saniye sürüyordu. Webpack'e geçtikten sonra büyük bir performans artışı elde ettim. Şimdi sadece bir paket dosyası yüklemek (neredeyse hiç değişmeyen ve neredeyse her zaman önbelleğe alınan çoklu dolgular ve satıcı kütüphaneleri) ve bu kadar. Şimdi istemci tarafı uygulamasını yüklemek sadece bir saniye sürüyor. Ek istemci tarafı mantığı yok. Daha az yüklenen ayrı dosya sayısı daha yüksek performans. Systemjs kullanırken, performanstan tasarruf etmek için modülleri dinamik olarak içe aktarmayı düşünmelisiniz. Webpack ile temel olarak mantığınıza odaklanırsınız, çünkü paket tarayıcınızda simge durumuna küçültüldüğünde ve önbelleğe alındığında performans yine de iyi olur.