Question

我有Angular 2（RC6）应用程序，它在DevJ中与SystemJS完美配合。我正在使用Gulp将应用程序依赖项绑定到vendor.min.js和应用程序文件到boot.js文件夹中的dist文件。问题出在SystemJS上。每次在System.register("")文件中遇到vendor.min.js时，它都会创建一个单独的请求。我附上图片，检查下面的发起人 - 所有请求都来自vendor.min.js

我正在使用system.config.js并且我有一个map，因为导致system.js分别加载所有文件的原因。但是，当我不使用system.config.js文件时，它会以我的开发模式搞定。

这是我的system.config.js文件

(function(global) {
    // map tells the System loader where to look for things
    var map = {
        'app':                        'assets/analytics/dist', // 'dist',
        'rxjs':                       'assets/analytics/node_modules/rxjs',
        '@angular':                   'assets/analytics/node_modules/@angular',
        'angular2-in-memory-web-api': 'assets/analytics/node_modules/angular2-in-memory-web-api',
        'lodash':                     'assets/analytics/node_modules/lodash/lodash.js',
        'd3':                         'assets/analytics/node_modules/d3/d3.js',
        'moment':                     'assets/analytics/node_modules/moment/moment.js'
    };

    // packages tells the System loader how to load when no filename and/or no extension
    var packages = {
        'app':                        { main: 'boot.js',  defaultExtension: 'js' },
        'rxjs':                       { defaultExtension: 'js' },
        'angular2-in-memory-web-api': { defaultExtension: 'js' },
        'lodash':                     { defaultExtension: 'js' },
        'd3':                         { defaultExtension: 'js' },
        'moment':                     { defaultExtension: 'js' }
    };

    var packageNames = [
        'common',
        'compiler',
        'core',
        'http',
        'forms',
        'platform-browser',
        'platform-browser-dynamic',
        'router',
        'router-deprecated',
        'testing',
        'upgrade'
    ];

    // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
    packageNames.forEach(function(pkgName) {
        packages['@angular/' + pkgName] = { main: 'index.js', defaultExtension: 'js' };
    });

    var config = {
        map: map,
        packages: packages
    }

    // filterSystemConfig - index.html's chance to modify config before we register it.
    if (global.filterSystemConfig) { global.filterSystemConfig(config); }

    System.config(config);

})(this);

这是gulpfile.js

const gulp = require('gulp'),
      del = require('del'),
      typescript = require('gulp-typescript'),
      sourcemaps = require('gulp-sourcemaps'),
      tscConfig = require('./tsconfig.json'),
      uglify = require('gulp-uglify'),
      concat = require('gulp-concat'),
      sass = require('gulp-sass'),
      livereload = require('gulp-livereload'),
      watch = require('gulp-watch'),
      embedTemplates = require('gulp-angular-embed-templates'),
      autoprefixer = require('gulp-autoprefixer');
      //Builder = require('systemjs-builder');

gulp.task('clean', function () {
    del.sync(['dist/**/**/*', '!dist/fonts']);
});

gulp.task('compile:dev', function () {
    var tsResult = gulp.src(['app/boot.ts', 'app/components/**/*.ts', 'typings/browser.d.ts'])
    // breaking sourcemaps
        .pipe(embedTemplates({ sourceType:'ts' }))
        .pipe(sourcemaps.init())
        .pipe(typescript(tscConfig.compilerOptions));

    return tsResult.js
    //.pipe(uglify({ mangle: false })) //screws up breakpoints in ts big time
        .pipe(sourcemaps.write('.', { sourceRoot: '/assets/analytics/app' }))
        .pipe(gulp.dest('./dist'))
        .pipe(livereload());
});

//with system-js bundler
// gulp.task('bundle', function(){
//    var builder = new Builder('', 'system.config.js');
//
//     return builder
//         .buildStatic()
// });

gulp.task('compile:prod', function () {
    var tsCompilerOptions = tscConfig.compilerOptions;
    tsCompilerOptions.outDir = null,
        tsCompilerOptions.outFile = "boot.js"; //analytics-app

    var tsResult = gulp.src(['app/boot.ts', 'app/components/**/*.ts', 'typings/browser.d.ts'])
    // breaking sourcemaps
        .pipe(embedTemplates({
            sourceType:'ts',
            minimize: {
                empty: true,
                spare: true,
                quotes: true,
                dom: {
                    lowerCaseAttributeNames: false,
                    lowerCaseTags: false
                }
            }
        }))
        .pipe(sourcemaps.init())
        //.pipe(typescript(tscConfig.compilerOptions));
        .pipe(typescript(tsCompilerOptions));

    return tsResult.js
        .pipe(uglify({ mangle: false }))
        .pipe(sourcemaps.write('.', { sourceRoot: '/assets/analytics/app' }))
        .pipe(gulp.dest('./dist'));
});

gulp.task('copy:jslibs', function() {
    return gulp.src([
        //old
        'node_modules/systemjs/dist/system.src.js',
        'node_modules/systemjs/dist/system-polyfills.js',

        //new - may only be needed in production
        // 'node_modules/@angular/core/index.js',
        // 'node_modules/@angular/router/index.js',
        // 'node_modules/@angular/platform-browser-dynamic/index.js',
        // 'node_modules/@angular/forms/index.js',
        // 'node_modules/@angular/http/index.js',

        //old
        'node_modules/reflect-metadata/Reflect.js',
        'node_modules/zone.js/dist/zone.js',
        'node_modules/es6-shim/es6-shim.min.js',
        'node_modules/lodash/core.js',
        'node_modules/jquery/dist/jquery.min.js',
        'node_modules/d3/d3.min.js',
        'node_modules/rxjs/bundles/Rx.js',
        'node_modules/web-animations-js/bundles/web-animations.min.js',
        'node_modules/moment/min/moment.min.js',
        'node_modules/moment-timezone/builds/moment-timezone-with-data.min.js',
        'node_modules/papaparse/papaparse.min.js',
        'node_modules/bootstrap-sass/assets/javascripts/bootstrap.min.js',
        'node_modules/bootstrap-daterangepicker/daterangepicker.js'
    ])
    .pipe(concat('vendor.min.js'))
    //.pipe(uglify({ mangle: false })) //make unuglified for systemjs debugging
    .pipe(gulp.dest('./dist/vendor'));
});

gulp.task('copy:csslibs', function(){
    return gulp.src(['./app/styles/vendor_imports.scss'])
        .pipe(concat('vendor.min.css'))
        .pipe(sass({ outputStyle: 'compressed' }).on('error', sass.logError))
        .pipe(gulp.dest('./dist/vendor'));
});

gulp.task('copy:images', function(){
    return gulp.src(['app/images/*']).pipe(gulp.dest('./dist/images'));
});

gulp.task('copy:fonts', ['copy:font-awesome', 'copy:bootstrap-fonts', 'copy:font-proxima']);

gulp.task('copy:font-awesome', function(){
    return gulp.src(['node_modules/font-awesome/fonts/*']).pipe(gulp.dest('./dist/fonts'));
});

gulp.task('copy:bootstrap-fonts', function(){
    return gulp.src(['node_modules/bootstrap-sass/assets/fonts/bootstrap/*']).pipe(gulp.dest('./dist/fonts/bootstrap'));
});

gulp.task('copy:font-proxima', function(){
    return gulp.src(['./app/fonts/*']).pipe(gulp.dest('./dist/fonts'));
});

const sassFiles = [
    '!app/styles/vendor_imports.scss',
    'app/styles/*.scss',
    'app/styles/modules/*.scss',
    'app/components/**/*.scss',
    'app/components/**/**/*.scss',
    'app/components/**/**/**/*.scss' //for facebook charts
];

gulp.task('sass:dev', function () {
    return gulp.src(sassFiles)
        .pipe(concat('main.css'))
        .pipe(sass({includePaths: ['./app/styles']}).on('error', sass.logError))
        .pipe(autoprefixer())
        .pipe(gulp.dest('./dist/styles'))
        .pipe(livereload());
});

gulp.task('sass:prod', function () {
    return gulp.src(sassFiles)
        .pipe(concat('main.css'))
        .pipe(sass({includePaths: ['./app/styles'], outputStyle: 'compressed'}).on('error', sass.logError))
        .pipe(autoprefixer())
        .pipe(gulp.dest('./dist/styles'));
});

gulp.task('watch:sass', function () {
    livereload.listen({
        reloadPage: 'analytics',
        quiet: true //disable console logging
    });
    return gulp.watch(sassFiles, ['sass:dev']);
});

gulp.task('watch:ts', function () {
    return gulp.watch([
        'app/boot.ts',
        'app/components/**/*.ts',
        'app/components/**/*.html'
    ], ['compile:dev']);
});

gulp.task('build', [
    'clean',
    'compile:prod',
    'copy:jslibs',
    'copy:csslibs',
    'copy:images',
    'sass:prod',
    'copy:fonts'
]);

gulp.task('w', ['watch:sass', 'watch:ts']);
gulp.task('default', ['build']);

我试图与systemjs bundler合作，但它并没有太顺利。

这是我的index.scala.html文件：

@import com.newswhip.usermanagement.business.NewsWhipAccount
@import com.newswhip.spike.controllers.routes._
@import helper._

@(account: NewsWhipAccount)

<!DOCTYPE html>
<html lang="en">
<head>
    <base href="/analytics">
    <!--<base href=".">-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Analytics</title>

    <link rel="shortcut icon" type="image/png" href="@routes.Assets.at("analytics/dist/images/favicon.ico")">
    <link rel="stylesheet" href="@routes.Assets.at("analytics/dist/vendor/vendor.min.css")">
    <link rel="stylesheet" href="@routes.Assets.at("analytics/dist/styles/main.css")">

    <script src="@routes.Assets.at("analytics/dist/vendor/vendor.min.js")"></script>

    <!-- if I hide this in production I am getting errors, so: in prod, in dev -->
    <script src="@routes.Assets.at("analytics/systemjs.config.js")"></script>

    <!-- in prod -->
    <script src="@routes.Assets.at("analytics/dist/boot.js")"></script>

    <script>
      window.analyticsAccountInfo = {
        syndicationAllowed: @account.syndicationAccessManager.displaySyndicationNetwork,
        timeZone: "@account.user.timeZone",
        email: "@account.user.email",
        userId: "@account.user.id",
        fullName:"@account.user.fullName",
        syndicationAgency:"@account.syndicationAccessManager.syndicationAgency"
      }
    </script>
</head>
<body>
    Welcome @{account.user.fullName}
    <div class="wrapper">
        <analytics-app></analytics-app>
    </div>

    <script>
          System.import('boot').then(null, console.error.bind(console)); //in prod
          //System.import('app').then(null, console.error.bind(console));  //in dev
    </script>

</body>
</html>

SystemJS从vendor.min.js加载模块，发出多个http请求

0 个答案: