如何使用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 () {

    var tsResult = tsProject.src()

        .pipe(ts(tsProject));

    tsResult.js.pipe(gulp.dest("./wwwroot/app"));

});

第2部分：配置config.js（以告诉JSPM如何捆绑您的应用程序）：

System.config({

  baseURL: "/",

  defaultJSExtensions: true,

  paths: {

    "npm:*": "jspm_packages/npm/*",

    "github:*": "jspm_packages/github/*",

    "node_modules*": "node_modules/*"

  },

  map: {

    'app': 'app',

    'rxjs': 'node_modules/rxjs',

    '@angular': 'node_modules/@angular'

  },

  packages: {

    'app': { main: 'bootDesktop.js', defaultExtension: 'js' },

    'rxjs': { defaultExtension: 'js' },

    '@angular/common': { main: 'index.js', defaultExtension: 'js' },

    '@angular/compiler': { main: 'index.js', defaultExtension: 'js' },

    '@angular/core': { main: 'index.js', defaultExtension: 'js' },

    '@angular/http': { main: 'index.js', defaultExtension: 'js' },

    '@angular/platform-browser': { main: 'index.js', defaultExtension: 'js' },

    '@angular/platform-browser-dynamic': { main: 'index.js', defaultExtension: 'js' },

    '@angular/router': { main: 'index.js', defaultExtension: 'js' },

    '@angular/router-deprecated': { main: 'index.js', defaultExtension: 'js' },

    '@angular/testing': { main: 'index.js', defaultExtension: 'js' },

    '@angular/upgrade': { main: 'index.js', defaultExtension: 'js' }

  }

});

第3部分：使用gulp-jspm-build捆绑您的应用程序（我以前使用过gulp-jspm，但是这会导致错误，所以我切换到gulp-jspm-build）：

var jspm = require('gulp-jspm-build');

gulp.task("jspm_bundle", function () {

return jspm({

    bundleOptions: {

        minify: true,

        mangle: false

    },

    bundleSfx: true,

    bundles: [

        { src: './wwwroot/app/appBoot.js', dst: 'boot.bundle.min.js' }

    ]

})

.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 

4：现在合并所有您已经缩小的资产：

gulp.task("min:js", ["jspm_bundle"], function () {

    //this only concats boot.bundle.min.js

    //and dependencies.min.js which has already been minified such as es6-shim.js

    var files = [

        "./wwwroot/js-temp/dependencies.min.js",

        "./wwwroot/js-temp/boot.bundle.min.js"

    ];

    return gulp.src(files)

        .pipe(concat("boot.bundle.min.js"))

        .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看起来像这样：

{

  "compilerOptions": {

    "emitDecoratorMetadata": true,

    "experimentalDecorators": true,

    "module": "commonjs",

    "moduleResolution": "node",

    "noImplicitAny": false,

    "noEmitOnError": true,

    "removeComments": false,

    "sourceMap": true,

    "declaration": false,

    "noLib": false,

    "target": "es5",

    "outDir": "wwwroot/app/"

  },

  "exclude": [

    "node_modules",

    "wwwroot"

  ]

}

Answer 2

您可以使用SystemJS Builder

如此简单

var path = require("path");

var Builder = require('systemjs-builder');

// optional constructor options

// sets the baseURL and loads the configuration file

var builder = new Builder('path/to/baseURL', 'path/to/system/config-file.js');

builder

.bundle('local/module.js', 'outfile.js')

.then(function() {

  console.log('Build complete');

})

.catch(function(err) {

  console.log('Build error');

  console.log(err);

});

您可以在我的入门项目中查看完整的设置