Điều quan trọng cần hiểu ở cấp độ này là sử dụng cấu hình sau, bạn không thể nối trực tiếp các tệp JS đã biên dịch.
Tại cấu hình trình biên dịch 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"
]
}
Trong HTML
System.config({
packages: {
app: {
defaultExtension: 'js',
format: 'register'
}
}
});
Trên thực tế, các tệp JS này sẽ chứa các mô-đun ẩn danh. Mô-đun ẩn danh là một tệp JS sử dụng System.registernhưng không có tên mô-đun làm tham số đầu tiên. Đây là những gì trình biên dịch typecript tạo ra theo mặc định khi systemjs được định cấu hình làm trình quản lý mô-đun.
Vì vậy, để có tất cả các mô-đun của bạn vào một tệp JS duy nhất, bạn cần tận dụng thuộc outFiletính trong cấu hình trình biên dịch TypeScript của mình.
Bạn có thể sử dụng bên trong gulp sau để làm điều đó:
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'));
});
Điều này có thể được kết hợp với một số xử lý khác:
- để xác minh những thứ mà các tệp TypeScript đã biên dịch
- để tạo một
app.jstệp
- để tạo
vendor.jstệp cho thư viện bên thứ ba
- để tạo một
boot.jstệp để nhập mô-đun khởi động ứng dụng. Tệp này phải được bao gồm ở cuối trang (khi tất cả trang được tải).
- cập nhật
index.htmlđể tính đến hai tệp này
Các phụ thuộc sau được sử dụng trong các tác vụ gulp:
- gulp-concat
- gulp-html-Replace
- gulp-stylescript
- nuốt nước bọt-uglify
Sau đây là một mẫu để nó có thể được điều chỉnh.
Tạo app.min.jstệp
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'));
});
Tạo vendors.min.jstệp
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'));
});
Tạo boot.min.jstệp
gulp.task('boot-bundle', function() {
gulp.src('config.prod.js')
.pipe(concat('boot.min.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist'));
});
Đơn config.prod.jsgiản chỉ chứa những điều sau:
System.import('boot')
.then(null, console.error.bind(console));
Cập nhật index.htmltệp
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'));
});
Các index.htmlngoại hình như sau:
<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>
Lưu ý rằng System.import('boot');phải thực hiện ở cuối phần nội dung để đợi tất cả các thành phần ứng dụng của bạn được đăng ký từ app.min.jstệp.
Tôi không mô tả ở đây cách xử lý CSS và HTML minification.