首页 文章

Angular 2.2和SystemJS：部署RXJS

提问于
浏览 次
5

我正在部署一个网站，但由于我使用的是Angular的最终版本，因此我无法使用rxjs . 我只能通过在我的网站上复制整个文件夹 node_modules/rxjs 来部署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));
    });

我使用以下Gulp脚本在 vendors.bundle.js 中包含rxjs：

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来自http://127.0.0.1/services/global-services/global.services的“rxjs / add / operator / map”

这是一个问题，因为当我们部署整个文件夹时，会产生大量请求以获取所有rxjs / * .js文件并且意味着主要在移动设备上表现不佳 .

当我只部署 Rx.min.js 文件时，我没有那个perfs问题 .

谁能告诉我如何使用Angular 2.2 et SystemJS部署 rxjs ？

angular rxjs systemjs

1 回答

  • 3

    感谢@martin！ :)

    这是解决方案：1 . 使用Gulp（在我的情况下）和 systemjs-builder 构建您自己的Rx.min.js

    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.在你的 SystemJS configuration file 中声明你的包裹 .

    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));
});

    很棒的马丁，我很费劲，解决方案深入讨论 . 我完全错过了:)

    Update !

    在我测试了该解决方案后，我可以确认性能得到了极大的改善！加载我的主页的时间大约是15秒，现在只需3秒！

    回复于

相关问题