Угловые 2.2 и SystemJS: развернуть RXJS

Question

Я развертываю веб-сайт, но я не могу «связывать» rxjs, так как я использую окончательную версию Angular. Я могу только развернуть rxjs, скопировав всю папку node_modules/rxjs на моем сайте.

Вот моя конфигурация SystemJS

System.config({ 
     map: { 
      'lodash':'http://127.0.0.1/js/lodash.min.js', 
      '@angular/core': 'http://127.0.0.1/js/core.umd.min.js', 
      '@angular/compiler': 'http://127.0.0.1/js/compiler.umd.min.js', 
      '@angular/common': 'http://127.0.0.1/js/common.umd.min.js', 
      '@angular/http': 'http://127.0.0.1/js/http.umd.min.js', 
      '@angular/platform-browser': 'http://127.0.0.1/js/platform-browser.umd.min.js', 
      '@angular/platform-browser-dynamic': 'http://127.0.0.1/js/platform-browser-dynamic.umd.min.js', 
      '@angular/router': 'http://127.0.0.1/js/router.umd.min.js', 
      '@angular/forms': 'http://127.0.0.1/js/forms.umd.min.js', 
      '@angular/upgrade': 'http://127.0.0.1/js/upgrade/bundles/upgrade.umd.js', 
      'rxjs':'http://127.0.0.1/js/vendors.bundle.js' 
     }, 
     packages: { 
      '/js': { 
       defaultExtension: 'js' 
      } 
     }, 
     bundles: { 
      '/js/app.bundle': ['main'] 
     } 
    }); 

    document.addEventListener('DOMContentLoaded', function() { 
     System.import('main').then(null, console.error.bind(console)); 
    }); 

Я включаю rxjs в vendors.bundle.js используя следующий скрипт: Глоток

gulp.task('vendor.bundle', function() { 
     gulp.src([ 
      'node_modules/systemjs/dist/system-polyfills.js', 
      'node_modules/zone.js/dist/zone.min.js', 
      'node_modules/reflect-metadata/Reflect.js', 
      'node_modules/systemjs/dist/system.src.js', 
      'node_modules/rxjs/bundles/Rx.min.js' 
     ]) 
      .pipe(concat('vendors.bundle.js')) 
      //.pipe(uglify()) 
      .pipe(gulp.dest('./dist/js')); 
    }); 

У меня есть ошибки, подобные следующим:

VM9314: 3GET http://127.0.0.1/js/vendors.bundle.js/add/operator/map.js 404 (не найдено) ...Ошибка при загрузке http://127.0.0.1/js/vendors.bundle.js/add/operator/map.js как «rxjs/добавить/оператор/карты» от http://127.0.0.1/services/global-services/global.services

Это проблема, потому что, когда мы направляем всю папку, которые генерируют огромное количество запроса, чтобы получить весь rxjs/* JS. Файлы и подразумевает низкую производительность в основном на мобильных устройствах.

У меня не было этой проблемы с перфорацией, когда я развертывал только файл Rx.min.js.

Может ли кто-нибудь сказать мне, как развернуть rxjs используя Angular 2.2 et SystemJS?

Answer 1

Thx to @martin! :)

Вот решение: 1. Создайте свой собственный Rx.min.js используя Глоток (в моем случае) и systemjs-строитель

var SystemBuilder = require('systemjs-builder'); 
gulp.task('rxjs.bundle', function() { 
    var builder = new SystemBuilder('./', { 
     paths: {"rxjs/*": "node_modules/rxjs/*.js"}, 
     map: {"rxjs": "node_modules/rxjs"}, 
     packages: {"rxjs": {main: 'Rx.js', defaultExtension: "js"}} 
    }); 

    builder.bundle('rxjs', 'dist/js/Rx.min.js', { 
     sourceMaps: true, 
     minify: true, 
     mangle: true 
    }); 
}); 

2.Declare ваш пакет в ваш Файл конфигурации SystemJS.

System.config({ 
    map: { 
     'lodash':'http://127.0.0.1/js/lodash.min.js', 
     '@angular/core': 'http://127.0.0.1/js/core.umd.min.js', 
     '@angular/compiler': 'http://127.0.0.1/js/compiler.umd.min.js', 
     '@angular/common': 'http://127.0.0.1/js/common.umd.min.js', 
     '@angular/http': 'http://127.0.0.1/js/http.umd.min.js', 
     '@angular/platform-browser': 'http://127.0.0.1/js/platform-browser.umd.min.js', 
     '@angular/platform-browser-dynamic': 'http://127.0.0.1/js/platform-browser-dynamic.umd.min.js', 
     '@angular/router': 'http://127.0.0.1/js/router.umd.min.js', 
     '@angular/forms': 'http://127.0.0.1/js/forms.umd.min.js', 
     '@angular/upgrade': 'http://127.0.0.1/js/upgrade/bundles/upgrade.umd.js' 
    }, 
    packages: { 
     '/js': { 
      defaultExtension: 'js' 
     } 
    }, 
    bundles: { 
     '/js/Rx.min.js': [ 
      "rxjs/*", 
      "rxjs/operator/*", 
      "rxjs/observable/*", 
      "rxjs/add/operator/*", 
      "rxjs/add/observable/*", 
      "rxjs/util/*" 
     ], 
     '/js/app.bundle': ['main'] 
    } 
}); 

document.addEventListener('DOMContentLoaded', function() { 
    System.import('main').then(null, console.error.bind(console)); 
}); 

Отличный thx martin, я много борюсь, и решение было глубоко внутри очень продолжительного обсуждения. Я полностью пропустил это :)

Обновление!

После того, как я проверил это решение, я могу подтвердить, что характеристики сильно улучшены! Продолжительность загрузки моей домашней страницы была около 15 секунд, а теперь всего 3 с!