Как подготовить версию выпуска с помощью SystemJS и Gulp?

Я использую SystemJS в моем проекте Angular2. Я использую файл tsconfig для TypeScript. Я хочу использовать gulp для конкатессии и сокращения моего кода для производственной версии. У меня возникают проблемы с конкретизацией кода: каждый раз, когда я пытаюсь конкатенировать файлы, я получаю либо "angular", либо не определен или "система" не определена. Я попытался изменить порядок загрузки файлов из модулей node, однако мне это не удалось.

Мне было интересно, есть ли у кого-нибудь из этих проблем и нашел ли ответ на него?

Вот мой файл 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'));
});
gulp.task('dev:build:vendor', function () {
    return gulp.src(paths.vendor.js)
        .pipe(concat('vendor.min.js'))
        .pipe(gulp.dest(paths.dist))
});

gulp.task('dev:build', [
    'dev:build:vendor',
    'dev:build:templates',
    'dev:build:scripts',
    'dev:build:styles',
], function () {
});

Вот как я загружаю файлы:

   <script src="vendor.min.js"></script>
   <script src="Whatever.js"></script>
   <script src="Whatever.tpls.min.js"></script>

И вот мои порождения, которые я получаю:

Uncaught TypeError: Unexpected anonymous System.register call.(anonymous function) @ vendor.min.js:2680load.metadata.format @ vendor.min.js:3220oldModule @ vendor.min.js:3749(anonymous function) @ vendor.min.js:2411SystemJSLoader.register @ vendor.min.js:2636(anonymous function) @ Whatever.js:2
Whatever.tpls.min.js:1 Uncaught ReferenceError: angular is not defined

ОТВЕТЫ

Ответ 1

Вы получите "Неожиданный анонимный вызов System.register", потому что ссылки не загружаются в правильном порядке. Я использую JSPM для правильной сборки моего приложения angular для производства. Есть 4 части процесса.

Часть 1: Скомпилируйте файлы typescript

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

Вы можете использовать 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);
});

вы можете посмотреть полную настройку в моем стартовом проекте

Ответ 3

Я думаю, что мы нашли основную причину этого. Честно говоря, я был там раньше, поэтому, как я прослеживаю этот тип проблемы,

  • Проверьте, загружены ли angular и systemjs заранее.
  • Проверьте, действительно ли они загружены. нет 404 сюрпризов. (Звучит глупо, но дерьмо бывает)
  • Если вы связываете библиотеки как vender.js, убедитесь, что они связаны в правильной последовательности. Проверьте выходной файл и посмотрите, являются ли они concat такими, как вы ожидаете.