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

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

Это моя текущая конфигурация для SystemJS:

(function (global) {

System.config({

    defaultExtension: 'js',
    defaultJSExtensions: true,

    paths: {
        'npm:': 'node_modules/'
    },

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

        // Our app is within the app folder
        app: 'app',

        // Angular bundles
        '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
        '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
        '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
        '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
        '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
        '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
        '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
        '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

        // Other libraries
        'rxjs': 'npm:rxjs',
        'ng2-translate': 'node_modules/ng2-translate'

    },

    // Tell the system loader how to load when no filename and/or no extension
    packages: {
        app: { main: './main.js', defaultExtension: 'js' },
        rxjs: { defaultExtension: 'js' },
        'ng2-translate': { defaultExtension: 'js' }
    }

});

})(this);

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

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

Я попытался заменить это:

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

с:

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

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

Я также попытался изменить это:

map: {

    // Our app is within the app folder
    app: 'production/app.bundle.min.js',

но это тоже не сработало.

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

gulp.task('inline-templates', function () {

return gulp.src('app/**/*.ts')
.pipe(inlineNg2Template({
    UseRelativePaths: true, 
    indent: 0,
    removeLineBreaks: true
}))
.pipe(tsc({
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": true,
    "noImplicitAny": false,
    "suppressImplicitAnyIndexErrors": true
 }))
.pipe(gulp.dest('dist'));

});

gulp.task('bundle-app', ['inline-templates'], function() {

var builder = new systemjsBuilder('', 'app/configs/systemjs.config.js');

return builder
    .bundle('dist/**/* - [@angular/**/*.js] - [rxjs/**/*.js]', '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', ['inline-templates'], function() {

var builder = new systemjsBuilder('', 'app/configs/systemjs.config.js');

return builder
    .bundle('dist/**/*.js - [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(){});

Я подозреваю, что мне нужно каким-то образом изменить сопоставления внутри моей конфигурации 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