Hal utama yang harus dipahami pada level ini adalah bahwa menggunakan konfigurasi berikut, Anda tidak dapat menggabungkan file JS yang dikompilasi secara langsung.
Pada konfigurasi compiler TypeScript:
{
"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"
]
}
Di HTML
System.config({
packages: {
app: {
defaultExtension: 'js',
format: 'register'
}
}
});
Faktanya, file JS ini akan berisi modul anonim. Modul anonim adalah file JS yang menggunakanSystem.register tetapi tanpa nama modul sebagai parameter pertama. Ini adalah apa yang dihasilkan kompilator skrip secara default ketika systemjs dikonfigurasi sebagai manajer modul.
Jadi agar semua modul Anda menjadi satu file JS, Anda perlu memanfaatkan outFileproperti dalam konfigurasi compiler TypeScript Anda.
Anda dapat menggunakan inside teguk untuk melakukan itu:
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'));
});
Ini dapat digabungkan dengan beberapa pemrosesan lainnya:
- untuk memperburuk hal-hal file TypeScript yang dikompilasi
- untuk membuat
app.jsfile
- untuk membuat
vendor.jsfile untuk perpustakaan pihak ketiga
- untuk membuat
boot.js file untuk mengimpor modul yang mem-bootstrap aplikasi. File ini harus disertakan di akhir halaman (ketika semua halaman dimuat).
- untuk memperbarui
index.htmluntuk memperhitungkan kedua file ini
Dependensi berikut digunakan dalam tugas gulp:
- gulp-concat
- gulp-html-replace
- gulp-typescript
- gulp-uglify
Berikut ini contoh agar bisa diadaptasi.
Buat app.min.jsfile
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'));
});
Buat vendors.min.jsfile
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'));
});
Buat boot.min.jsfile
gulp.task('boot-bundle', function() {
gulp.src('config.prod.js')
.pipe(concat('boot.min.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist'));
});
The config.prod.jshanya berisi berikut:
System.import('boot')
.then(null, console.error.bind(console));
Perbarui index.htmlfile
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'));
});
The index.htmlterlihat seperti berikut:
<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>
Perhatikan bahwa System.import('boot');harus dilakukan di akhir bagian isi untuk menunggu semua komponen aplikasi Anda didaftarkan dari app.min.jsfile.
Saya tidak menjelaskan di sini cara menangani minifikasi CSS dan HTML.