如何使用SystemJS和Gulp准备发行版本？

Question

我在Angular2项目中使用SystemJS。我将tsconfig文件用于TypeScript。我想使用gulp合并并最小化生产版本的代码。我在编写代码时遇到问题：每次尝试合并文件时，都会得到未定义的“角度”或未定义的“系统”。我试图修改尝试从节点模块加载文件的顺序，但是没有成功。

我想知道你们中是否有人遇到这个问题，并找到了答案？

这是我的gulp文件：

var gulp = require('gulp'),

            .....

var paths = {

    dist: 'dist',

    vendor: {

        js: [

            'node_modules/systemjs/dist/system.src.js',

            'node_modules/angular2/bundles/angular2.dev.js',

            'node_modules/angular2/bundles/angular2-polyfills.js',

            'node_modules/angular2/bundles/router.dev.js'

             ...

        ],

        css: []

},

    app: {

        templates: [

            'app/**/*.html',

            '!node_modules/*.html'

        ],

        scripts: [

            'app/**/*.ts',

            'app/config.ts',

            'app/app.ts'

        ]

    }

};

var tsProject = ts.createProject('tsconfig.json', {

    out: 'Whatever.js'

});

gulp.task('dev:build:templates', function () {

    return gulp.src(paths.app.templates)

        .pipe(ngHtml2Js({

            moduleName: 'Whatever',

            declareModule: false

        }))

        .pipe(concat("Whatever.tpls.min.js"))

        .pipe(gulp.dest(paths.dist));

});

gulp.task('prod:build:templates', function () {

    return gulp.src(paths.app.templates)

        .pipe(minifyHtml({

            empty: true,

            spare: true,

            quotes: true

        }))

        .pipe(ngHtml2Js({

            moduleName: 'whatever',

            declareModule: false

        }))

        .pipe(concat(paths.appName + ".tpls.min.js"))

        .pipe(uglify())

        .pipe(gulp.dest(paths.dist));

});

gulp.task('dev:build:scripts', function () {

    var tsResult = tsProject.src()

        .pipe(sourcemaps.init())

        .pipe(ts(tsProject));

    return tsResult.js

        .pipe(sourcemaps.write({

            sourceRoot: '/app'

        }))

        .pipe(concat('whatever.js'))

        .pipe(gulp.dest(paths.dist));

});

gulp.task('dev:build:styles', function () {

    return gulp.src(paths.app.styles)

        .pipe(sass())

        .pipe(gulp.dest(paths.dist + '/css'));

});

Answer 1

您将得到“意外的匿名System.register调用”，因为未按正确的顺序加载引用。我使用JSPM来正确构建我的角度应用程序以进行生产。该过程分为四个部分。第1部分：编译您的打字稿文件var ts = require("gulp-typescript");var tsProject = ts.createProject("./App/tsconfig.json");gulp.task("compile:ts", function () {&nbsp; &nbsp; var tsResult = tsProject.src()&nbsp; &nbsp; &nbsp; &nbsp; .pipe(ts(tsProject));&nbsp; &nbsp; tsResult.js.pipe(gulp.dest("./wwwroot/app"));});第2部分：配置config.js（以告诉JSPM如何捆绑您的应用程序）：System.config({&nbsp; baseURL: "/",&nbsp; defaultJSExtensions: true,&nbsp; paths: {&nbsp; &nbsp; "npm:*": "jspm_packages/npm/*",&nbsp; &nbsp; "github:*": "jspm_packages/github/*",&nbsp; &nbsp; "node_modules*": "node_modules/*"&nbsp; },&nbsp; map: {&nbsp; &nbsp; 'app': 'app',&nbsp; &nbsp; 'rxjs': 'node_modules/rxjs',&nbsp; &nbsp; '@angular': 'node_modules/@angular'&nbsp; },&nbsp; packages: {&nbsp; &nbsp; 'app': { main: 'bootDesktop.js', defaultExtension: 'js' },&nbsp; &nbsp; 'rxjs': { defaultExtension: 'js' },&nbsp; &nbsp; '@angular/common': { main: 'index.js', defaultExtension: 'js' },&nbsp; &nbsp; '@angular/compiler': { main: 'index.js', defaultExtension: 'js' },&nbsp; &nbsp; '@angular/core': { main: 'index.js', defaultExtension: 'js' },&nbsp; &nbsp; '@angular/http': { main: 'index.js', defaultExtension: 'js' },&nbsp; &nbsp; '@angular/platform-browser': { main: 'index.js', defaultExtension: 'js' },&nbsp; &nbsp; '@angular/platform-browser-dynamic': { main: 'index.js', defaultExtension: 'js' },&nbsp; &nbsp; '@angular/router': { main: 'index.js', defaultExtension: 'js' },&nbsp; &nbsp; '@angular/router-deprecated': { main: 'index.js', defaultExtension: 'js' },&nbsp; &nbsp; '@angular/testing': { main: 'index.js', defaultExtension: 'js' },&nbsp; &nbsp; '@angular/upgrade': { main: 'index.js', defaultExtension: 'js' }&nbsp; }});第3部分：使用gulp-jspm-build捆绑您的应用程序（我以前使用过gulp-jspm，但是这会导致错误，所以我切换到gulp-jspm-build）：var jspm = require('gulp-jspm-build');gulp.task("jspm_bundle", function () {return jspm({&nbsp; &nbsp; bundleOptions: {&nbsp; &nbsp; &nbsp; &nbsp; minify: true,&nbsp; &nbsp; &nbsp; &nbsp; mangle: false&nbsp; &nbsp; },&nbsp; &nbsp; bundleSfx: true,&nbsp; &nbsp; bundles: [&nbsp; &nbsp; &nbsp; &nbsp; { src: './wwwroot/app/appBoot.js', dst: 'boot.bundle.min.js' }&nbsp; &nbsp; ]}).pipe(gulp.dest('./wwwroot/js-temp'));});//this will create a file called boot.bundle.min.js//note I have set jspm to create a self-executing bundle//I put mangle to false because mangling was causing errors&nbsp;4：现在合并所有您已经缩小的资产：gulp.task("min:js", ["jspm_bundle"], function () {&nbsp; &nbsp; //this only concats boot.bundle.min.js&nbsp; &nbsp; //and dependencies.min.js which has already been minified such as es6-shim.js&nbsp; &nbsp; var files = [&nbsp; &nbsp; &nbsp; &nbsp; "./wwwroot/js-temp/dependencies.min.js",&nbsp; &nbsp; &nbsp; &nbsp; "./wwwroot/js-temp/boot.bundle.min.js"&nbsp; &nbsp; ];&nbsp; &nbsp; return gulp.src(files)&nbsp; &nbsp; &nbsp; &nbsp; .pipe(concat("boot.bundle.min.js"))&nbsp; &nbsp; &nbsp; &nbsp; .pipe(gulp.dest("./wwwroot/js"));});最后，在您的index.html中放入一个很好的整洁脚本引用：<script src="~/js/boot.bundle.min.js"> </script>这种方法的优点之一是，捆绑的应用程序将仅包含导入语句中实际引用的资产（如果不需要，jspm不会捆绑它）。更新：修改config.js以符合Angular 2.0-rc.0 appp更新2：tsconfig.json看起来像这样：{&nbsp; "compilerOptions": {&nbsp; &nbsp; "emitDecoratorMetadata": true,&nbsp; &nbsp; "experimentalDecorators": true,&nbsp; &nbsp; "module": "commonjs",&nbsp; &nbsp; "moduleResolution": "node",&nbsp; &nbsp; "noImplicitAny": false,&nbsp; &nbsp; "noEmitOnError": true,&nbsp; &nbsp; "removeComments": false,&nbsp; &nbsp; "sourceMap": true,&nbsp; &nbsp; "declaration": false,&nbsp; &nbsp; "noLib": false,&nbsp; &nbsp; "target": "es5",&nbsp; &nbsp; "outDir": "wwwroot/app/"&nbsp; },&nbsp; "exclude": [&nbsp; &nbsp; "node_modules",&nbsp; &nbsp; "wwwroot"&nbsp; ]}

Answer 2

您可以使用SystemJS Builder如此简单var path = require("path");var Builder = require('systemjs-builder');// optional constructor options// sets the baseURL and loads the configuration filevar builder = new Builder('path/to/baseURL', 'path/to/system/config-file.js');builder.bundle('local/module.js', 'outfile.js').then(function() {&nbsp; console.log('Build complete');}).catch(function(err) {&nbsp; console.log('Build error');&nbsp; console.log(err);});您可以在我的入门项目中查看完整的设置