В чем разница между SystemJS и Webpack?

Я создаю свое первое Угловое приложение, и я бы выяснил, какова роль загрузчиков модулей. Почему мы нуждаемся в них? Я пытался искать и искать в 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 или другие)?
Наконец, на ваш взгляд, что лучше?

3 179
angularjs webpack systemjs node-modules

3 ответа:

если вы перейдете на страницу SystemJS Github, вы увидите описание инструмента:

универсальный динамический модуль loader-загружает модули 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-это гибкий модуль bundler. Это означает, что он идет дальше и не только обрабатывает модули, но также предоставляет возможность создать пакет приложения (функция concat файлов, уродовать файлов ...). Он также предоставляет dev-сервер с перезагрузкой нагрузки для разработки

SystemJS и Webpack отличаются, но с SystemJS у вас все еще есть работа (с залпом или SystemJS builder например) для упаковки вашего приложения Angular2 для производства.

109

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 pro!

Webpack совершенно другой и занимает целую вечность, чтобы освоить. Это не делает то же самое, что и SystemJS, но при использовании Webpack SystemJS становится избыточным.

Webpack готовит один файл с именем bundle.Яш - этот файл содержит все HTML-код, CSS, JS и т. д. Поскольку все файлы объединены в один файл, теперь нет необходимости в ленивом загрузчике, таком как SystemJS (где отдельные файлы загружаются по мере необходимости).

плюсом SystemJS является эта ленивая загрузка. Приложение должно загружаться быстрее, потому что вы не загружаете все в одном удар.

преимущество Webpack заключается в том, что, хотя приложение может занять несколько секунд для загрузки изначально, после загрузки и кэширования оно молниеносно.

Я предпочитаю SystemJS, но Webpack кажется более модным.

Angular2 quickstart использует SystemJS.

угловой CLI использует Webpack.

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

Примечание SystemJS реализует стандарт загрузки модуля ES6. Webpack - это просто еще один модуль npm.

Task runners (необязательное чтение для тех, кто хочет понять экосистему, в которой может существовать SystemJS)

С SystemJS его единственная ответственность-это ленивая загрузка файлов, поэтому что-то еще нужно для минимизации этих файлов, транспилирования этих файлов (например, от SASS до CSS) и т. д. Эти задания, которые должны быть выполнены, известны как задачи.

Webpack, когда настроенный, правильно делает это для вас (и связывает выходные данные вместе). Если вы хотите сделать что-то подобное с SystemJS, вы обычно используете JavaScript Task runner. Самым популярным бегуном задач является еще один модуль npm под названием залпом.

Так, например, SystemJS может лениво загружать уменьшенный файл JavaScript, который был уменьшен с помощью gulp. Gulp, при правильной настройке, может минимизировать файлы на лету и перезагружать в реальном времени. Жить перегрузки-автоматическое обнаружение изменение кода и автоматическое обновление браузера для обновления. Большой во время развития. С помощью CSS возможна прямая трансляция (т. е. вы видите, что страница обновляет новые стили без перезагрузки страницы).

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

166

до сих пор я использовал systemjs. Он загружал файлы один за другим, и первая загрузка занимала 3-4 секунды без мини-файлов. После перехода на webpack я получил большое улучшение производительности. Теперь требуется только загрузить один файл пакета (также polyfills и и vendor libs, которые почти никогда не изменялись и почти всегда кэшировались), и все. Теперь это займет всего секунду, чтобы загрузить приложение на стороне клиента. Никакой дополнительной логики на стороне клиента. Чем меньше количество отдельных загруженных файлов, тем выше спектакль. При использовании systemjs вы должны думать об импорте модулей динамически, чтобы сохранить производительность. С webpack вы фокусируетесь в основном на своей логике, потому что производительность будет по-прежнему хорошей, как только пакет будет уменьшен и кэширован в вашем браузере.

0