Які відмінності між 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. У цьому прикладі конфігураційний файл компілятора машинопису буде виглядати так:

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

Webpack - це гнучка постачальниця модулів. Це означає, що це йде далі і не лише обробляє модулі, але й надає спосіб упаковки вашої програми (файли concat, uglify файли, ...). Він також забезпечує сервер розробників із завантаженням завантаження для розробки.

SystemJS та Webpack відрізняються, але із SystemJS вам ще належить попрацювати (наприклад, з Gulp або Builder SystemJS ), щоб упакувати додаток Angular2 для виробництва.

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 Quickstart використовує SystemJS.

Кутова CLI використовує Webpack.

Webpack 2 (який буде пропонувати струшування дерева) знаходиться в бета-версії, тому, можливо, поганий час для переходу на Webpack.

Примітка. SystemJS реалізує стандарт завантаження модуля ES6 . Webpack - це ще один модуль npm.

Робочі завдання (необов’язкове читання для тих, хто хоче зрозуміти екосистему, в якій може існувати SystemJS)

У SystemJS єдиною відповідальністю є ледача завантаження файлів, тому щось ще потрібно для мінімізації цих файлів, трансляції цих файлів (наприклад, з SASS до CSS) тощо. Ці завдання, які необхідно виконати, відомі як завдання .

При налаштуванні Webpack правильно робить це за вас (і поєднує вихідний результат разом). Якщо ви хочете зробити щось подібне з SystemJS, ви зазвичай використовуєте бігунок завдань JavaScript. Найпопулярніший виконавець завдань - ще один модуль npm, який називається gulp .

Так, наприклад, SystemJS може ледаче завантажити мінімізований файл JavaScript, який був мінімізований gulp. При правильному налаштуванні Gulp може мінімізувати файли під час льоту та перезавантажувати їх у реальному часі. Перезавантаження в реальному часі - це автоматичне виявлення зміни коду та автоматичне оновлення браузера для оновлення. Чудово під час розвитку. За допомогою CSS можлива трансляція в реальному часі (тобто ви бачите, що сторінка оновлює нові стилі, навіть не перезавантажуючи сторінку).

Є багато інших завдань, які Webpack і gulp можуть виконувати, які були б занадто численні, щоб охопити тут. Я наводив приклад :)

Поки я використовував systemjs. Він завантажував файли один за одним, і перше завантаження займало 3-4 секунди, без зменшених файлів. Після переходу на веб-пакет я покращив продуктивність. Тепер потрібно лише завантажити один файл пакету (також поліфіли та вкладки постачальників, які майже ніколи не змінювалися і майже завжди кешувались) і все. Тепер потрібно лише секунду, щоб завантажити додаток на стороні клієнта. Немає додаткової логіки на стороні клієнта. Як менше кількість завантажених окремих файлів, тим вища продуктивність. Під час використання systemjs вам слід подумати про те, щоб динамічно імпортувати модулі для економії роботи. За допомогою веб-пакета ви зосереджуєтесь головним чином на своїй логіці, оскільки продуктивність буде як і раніше хороша, як тільки пакет буде мінімізований та кешований у вашому браузері.