Angular 2: Как сообщить SystemJS использовать пакет?

У меня есть приложение Angular 2 RC7, где я использую SystemJS для загрузки файлов JavaScript.

Теперь я создал пакет с именем app.bundle.min.js, который содержит всю мою логику приложения, и dependencies.bundle.min.js, который содержит используемые зависимости.

Как сообщить SystemJS использовать эти файлы вместо импорта файлов по отдельности?

в моем index.html, но это не работает. Пока я сохраняю блок System.import... script внутри index.html, приложение загружается, но использует отдельные файлы вместо пакетов.

Я подозреваю, что мне нужно каким-то образом изменить сопоставления внутри моей конфигурации SystemJS, чтобы указать на пакеты? Как это сделать?

Ответы

Ответ 1

В соответствии с map и packages в вашей конфигурации SystemJS

System.import('app')

преобразуется в запрос файла app/main.js. Однако, если вы посмотрите на сгенерированный пакет приложений, вы увидите, что этот модуль фактически зарегистрирован как

System.registerDynamic("dist/main.js" ...

потому что пакет был сгенерирован из .js файлов в папке dist.

Это несоответствие является причиной того, что ваши модули не загружаются из пакета script.

Одно из возможных решений - всегда хранить файлы .ts и .js в отдельных папках - .ts в app, .js в dist. Таким образом, systemjs нужно будет знать только о dist: единственная часть systemjs.config.js, которая должна быть изменена, - это app mapping:

// Let the system loader know where to look for things
map: {

    // Our app is compiled to js files in the dist folder
    app: 'dist',

Чтобы проверить, что это работает, я начал с angular пример быстрого запуска и добавил gulpfile.js с этими задачами:

скомпилировать typescript в dist с помощью gulp-typescript плагина.

var gulp = require('gulp');
var typescript = require('typescript');
var tsc = require('gulp-typescript');

var systemjsBuilder = require('systemjs-builder');

gulp.task('tsc', function () {

  return gulp.src(['app/**/*.ts', 'typings/index.d.ts'])
    .pipe(tsc({
      "target": "es5",
      "module": "commonjs",
      "moduleResolution": "node",
      "sourceMap": true,
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "removeComments": true,
      "noImplicitAny": false,
      "suppressImplicitAnyIndexErrors": true
    }))
    .js.pipe(gulp.dest('dist'));
});

скопируйте файл конфигурации systemjs в папку dist, так что он будет связан вместе с кодом приложения и будет доступен в процессе производства (это необходимо, потому что вы используете bundle, а не buildStatic)
```
gulp.task('bundle-config', function() {
  return gulp.src('app/configs/systemjs.config.js')
    .pipe(gulp.dest('dist/configs'));
});
```

генерировать пучки с помощью конструктора systemjs:

gulp.task('bundle-app', ['bundle-config', 'tsc'], function() {

  var builder = new systemjsBuilder('', 'app/configs/systemjs.config.js');
  return builder
      .bundle('[dist/**/*]', 'production/app.bundle.min.js', {
          minify: true,
          mangle: true
      })
      .then(function() {
          console.log('Build complete');
      })
      .catch(function(err) {
          console.log('Build error');
          console.log(err);
      });

});

gulp.task('bundle-dependencies', ['bundle-config', 'tsc'], function() {

  var builder = new systemjsBuilder('', 'app/configs/systemjs.config.js');
  return builder
      .bundle('dist/**/* - [dist/**/*.js]', 'production/dependencies.bundle.min.js', {
          minify: true,
          mangle: true
      })
      .then(function() {
          console.log('Build complete');
      })
      .catch(function(err) {
          console.log('Build error');
          console.log(err);
      });

  });

gulp.task('production', ['bundle-app', 'bundle-dependencies'], function(){});

Обратите внимание, что он использует синтаксис [dist/**/*] для генерации пакета приложений без каких-либо зависимостей - тот, что находится в вашем gulpfile.js, отличается и генерирует гораздо больший пакет, который включает в себя некоторые зависимости - я не знаю, было ли это намеренно или нет.

Затем я создал index-production.html с этими изменениями из index.html:

удалить тег <script> для systemjs.config.js - мы импортируем его из пакета

добавить теги <script> для пакетов в <head>

<script src="production/dependencies.bundle.min.js"></script>
<script src="production/app.bundle.min.js"></script>

добавить inline <script>, который импортирует модуль конфигурации и приложения:

<script>
  System.import('dist/configs/systemjs.config.js').then(function() {
    System.import('app').catch(function(err){ console.error(err); });
  });
</script>

importing 'app' module необходим, потому что пакеты, сгенерированные с помощью bundle, не импортируют ничего и не запускают какой-либо код - они только делают все модули доступными для импорта позже, в отличие от пакетов sfx, сгенерированных с помощью buildStatic.

Кроме того, этот script блок должен находиться в элементе <body> после <my-app>, иначе app запустится слишком рано, когда элемент <my-app> еще не создан (в качестве альтернативы import('app') может быть вызывается событие "готовность документа".

Вы можете найти полный пример в github: https://github.com/fictitious/test-systemjs-angular-gulp