Auf dieser Ebene ist es wichtig zu verstehen, dass Sie mit der folgenden Konfiguration kompilierte JS-Dateien nicht direkt zusammenfassen können.
Bei der TypeScript-Compilerkonfiguration:
{
"compilerOptions": {
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"declaration": false,
"stripInternal": true,
"module": "system",
"moduleResolution": "node",
"noEmitOnError": false,
"rootDir": ".",
"inlineSourceMap": true,
"inlineSources": true,
"target": "es5"
},
"exclude": [
"node_modules"
]
}
Im HTML
System.config({
packages: {
app: {
defaultExtension: 'js',
format: 'register'
}
}
});
Tatsächlich enthalten diese JS-Dateien anonyme Module. Ein anonymes Modul ist eine JS-Datei, die System.registerjedoch ohne den Modulnamen als ersten Parameter verwendet wird. Dies generiert der Typoskript-Compiler standardmäßig, wenn systemjs als Modulmanager konfiguriert ist.
Um alle Ihre Module in einer einzigen JS-Datei zu haben, müssen Sie die outFileEigenschaft in Ihrer TypeScript-Compilerkonfiguration nutzen.
Sie können das folgende innere Schlucken verwenden, um das zu tun:
const gulp = require('gulp');
const ts = require('gulp-typescript');
var tsProject = ts.createProject('tsconfig.json', {
typescript: require('typescript'),
outFile: 'app.js'
});
gulp.task('tscompile', function () {
var tsResult = gulp.src('./app/**/*.ts')
.pipe(ts(tsProject));
return tsResult.js.pipe(gulp.dest('./dist'));
});
Dies könnte mit einer anderen Verarbeitung kombiniert werden:
- um die kompilierten TypeScript-Dateien zu hässlich zu machen
- um eine
app.jsDatei zu erstellen
- um eine
vendor.jsDatei für Bibliotheken von Drittanbietern zu erstellen
- um eine
boot.jsDatei zum Importieren des Moduls zu erstellen , das die Anwendung bootstrap. Diese Datei muss am Ende der Seite enthalten sein (wenn die gesamte Seite geladen ist).
- um das zu aktualisieren
index.html, um diese beiden Dateien zu berücksichtigen
Die folgenden Abhängigkeiten werden in den Schluckaufgaben verwendet:
- Schluck-Concat
- gulp-html-replace
- Schluck-Typoskript
- schlucken-hässlich machen
Das Folgende ist ein Beispiel, damit es angepasst werden kann.
app.min.jsDatei erstellen
gulp.task('app-bundle', function () {
var tsProject = ts.createProject('tsconfig.json', {
typescript: require('typescript'),
outFile: 'app.js'
});
var tsResult = gulp.src('app/**/*.ts')
.pipe(ts(tsProject));
return tsResult.js.pipe(concat('app.min.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist'));
});
vendors.min.jsDatei erstellen
gulp.task('vendor-bundle', function() {
gulp.src([
'node_modules/es6-shim/es6-shim.min.js',
'node_modules/systemjs/dist/system-polyfills.js',
'node_modules/angular2/bundles/angular2-polyfills.js',
'node_modules/systemjs/dist/system.src.js',
'node_modules/rxjs/bundles/Rx.js',
'node_modules/angular2/bundles/angular2.dev.js',
'node_modules/angular2/bundles/http.dev.js'
])
.pipe(concat('vendors.min.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist'));
});
boot.min.jsDatei erstellen
gulp.task('boot-bundle', function() {
gulp.src('config.prod.js')
.pipe(concat('boot.min.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist'));
});
Das config.prod.jsenthält einfach folgendes:
System.import('boot')
.then(null, console.error.bind(console));
Aktualisieren Sie die index.htmlDatei
gulp.task('html', function() {
gulp.src('index.html')
.pipe(htmlreplace({
'vendor': 'vendors.min.js',
'app': 'app.min.js',
'boot': 'boot.min.js'
}))
.pipe(gulp.dest('dist'));
});
Das index.htmlsieht wie folgt aus:
<html>
<head>
<!-- Some CSS -->
<!-- build:vendor -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/http.dev.js"></script>
<!-- endbuild -->
<!-- build:app -->
<script src="config.js"></script>
<!-- endbuild -->
</head>
<body>
<my-app>Loading...</my-app>
<!-- build:boot -->
<!-- endbuild -->
</body>
</html>
Beachten Sie, dass System.import('boot');dies am Ende des Körpers erfolgen muss, um darauf zu warten, dass alle Ihre App-Komponenten aus der app.min.jsDatei registriert werden.
Ich beschreibe hier nicht den Umgang mit CSS- und HTML-Minimierung.