Kluczową rzeczą do zrozumienia na tym poziomie jest to, że używając następującej konfiguracji, nie można bezpośrednio łączyć skompilowanych plików JS.
W konfiguracji kompilatora 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"
]
}
W HTML
System.config({
packages: {
app: {
defaultExtension: 'js',
format: 'register'
}
}
});
W rzeczywistości te pliki JS będą zawierać anonimowe moduły. Moduł anonimowy to plik JS, który używaSystem.register nazwy modułu jako pierwszego parametru, ale bez nazwy. To jest to, co kompilator TypeScript generuje domyślnie, gdy systemjs jest skonfigurowany jako menedżer modułów.
Aby mieć wszystkie swoje moduły w jednym pliku JS, musisz wykorzystać rozszerzenie outFile właściwość w konfiguracji kompilatora TypeScript.
Aby to zrobić, możesz użyć następującego wewnętrznego łyku:
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'));
});
Można to połączyć z innym przetwarzaniem:
- aby uglifikować rzeczy skompilowane pliki TypeScript
- aby utworzyć
app.jsplik
- aby utworzyć
vendor.jsplik dla bibliotek innych firm
- stworzyć
boot.js plik w celu zaimportowania modułu ładującego aplikację. Ten plik musi znajdować się na końcu strony (gdy cała strona jest załadowana).
- aby zaktualizować,
index.htmlaby uwzględnić te dwa pliki
W zadaniach łykowych używane są następujące zależności:
- gulp-concat
- gulp-html-replace
- maszynopis
- gulp-uglify
Poniżej znajduje się próbka, która może zostać dostosowana.
Utwórz app.min.jsplik
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'));
});
Utwórz vendors.min.jsplik
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'));
});
Utwórz boot.min.jsplik
gulp.task('boot-bundle', function() {
gulp.src('config.prod.js')
.pipe(concat('boot.min.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist'));
});
config.prod.jsProstu zawiera następujące elementy:
System.import('boot')
.then(null, console.error.bind(console));
Zaktualizuj index.htmlplik
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'));
});
Do index.htmlwygląda następująco:
<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>
Zwróć uwagę, że System.import('boot');należy wykonać na końcu treści, aby poczekać na zarejestrowanie wszystkich składników aplikacji z plikuapp.min.js pliku.
Nie opisuję tutaj sposobu obsługi minifikacji CSS i HTML.