Я использую SystemJS в своем проекте Angular2. Я использую файл tsconfig для TypeScript. Я хочу использовать 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