node.js - Hur man laddar en bundlad fil i systemimport i Angular 2 med Gulp: Fel: Flera anonyma System.register-anrop i modul

Jag har en Angular 2-applikation med TypeScript som genererar js-filer.

Nyligen installerade jag npm och gulp och skrev uppgifter för att bunta alla js-filer till en enda, nu hur laddar man den filen?

Tidigare i min index.html-sida: //vilket fungerar där main är komponenten som startar appComponent

<script>
        System.config({
            packages: {
                app: {
                    format: 'register',
                    defaultExtension: 'js',
                    defaultJSExtensions: true
                }
            }
        });
        debugger;
        //System.import('Scripts/main')
        System.import('app/V1/components/main')
              .then(null, console.error.bind(console));
    </script>

Min Gulp-uppgift:

var config = {
    src: ['app/**/*.js'],
    dest: ['Scripts/']
};

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

    console.log('testing');
    return gulp.src(config.src)
      .pipe(uglify())
      .pipe(concat('all.min.js'))
      .pipe(gulp.dest('app/'));
})

När jag kör denna gulp-uppgift genererar den all.min.js men hur använder man detta nu, det vill säga hur tar man bort main.js i System.import och laddar detta

<script>
        System.config({
            packages: {
                app: {
                    format: 'register',
                    defaultExtension: 'js',
                    defaultJSExtensions: true
                }
            },
            map: {
                immutable: 'app/all.min.js'
            }
        });
        debugger;
        //System.import('Scripts/main')
        System.import('app/all.min')
              .then(null, console.error.bind(console));
    </script>

Jag försökte på detta sätt som ger fel som

Fel: Flera anonyma System.register-anrop i modul http://localhost:55308/app/all.min.js. Om du laddar ett paket, se till att alla System.register-anrop är namngivna.

Svar #1

Jag tror att det finns en bättre lösning för att bunta filer för användning med system.js. Det finns ett praktiskt bibliotek som heter systemjs-builder. Du kan enkelt använda det med gulp.

Först behöver du extrahera ditt system.js-skript till en separat fil. Sedan kan du använda denna uppgift för att generera den sammanfogade js.

gulp.task('system', () => {
    var builder = new systemBuilder();

    return builder.loadConfig('./system.config.js') // Name of your system js file
        .then(() => builder.buildStatic('app',  'total.js'))

});

Nu har du de sammanfogade filerna samt system.js-konfigurationen som behövs för att köra dem, allt borde fungera bra vid det här laget. Du kommer dock att behöva använda ett separat bibliotek för att uglifya js. gulp-uglify borde fungera bra.

Här är ett exempeluppdrag:

gulp.task('build', ['system'], () => {
    return gulp.src([
        'node_modules/core-js/client/shim.min.js',
        'node_modules/zone.js/dist/zone.js',
        'node_modules/reflect-metadata/Reflect.js',
        'node_modules/systemjs/dist/system.src.js',
        'total.js'
    ])
        .pipe(concat('main.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./'))
    });

Nu, om du kör gulp build och inkluderar den genererade main.js i din index.html (och tar bort alla andra skript), bör allt fungera.

Relaterade artiklar