在此级别要理解的关键是，使用以下配置，您无法直接连接已编译的JS文件。
在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"
]
}
在HTML中
System.config({
packages: {
app: {
defaultExtension: 'js',
format: 'register'
}
}
});
实际上，这些JS文件将包含匿名模块。匿名模块是使用以下内容的JS文件System.register但不使用模块名称作为第一个参数。这是将systemjs配置为模块管理器时，默认情况下，打字稿编译器生成的内容。
因此，要将所有模块放入一个JS文件中，需要利用outFileTypeScript编译器配置中的属性。
您可以在内部使用以下代码来做到这一点：
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'));
});
这可以与其他一些处理结合使用：
- 丑陋的东西编译的TypeScript文件
- 创建一个
app.js文件
- 为
vendor.js第三方库创建文件
- 创建
boot.js文件以导入引导应用程序的模块。该文件必须包含在页面末尾（加载所有页面时）。
- 更新
index.html以考虑这两个文件
gulp任务中使用以下依赖项：
- gulp-concat
- gulp-html-replace
- gulp打字稿
- 吞咽
以下是一个示例，因此可以对其进行修改。
建立app.min.js档案
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.js档案
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.js档案
gulp.task('boot-bundle', function() {
gulp.src('config.prod.js')
.pipe(concat('boot.min.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist'));
});
在config.prod.js简单地包含以下内容：
System.import('boot')
.then(null, console.error.bind(console));
更新index.html档案
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'));
});
该index.html如下所示：
<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>
请注意，System.import('boot');必须在正文末尾完成，以等待从app.min.js文件中注册所有应用程序组件。
我在这里没有描述处理CSS和HTML缩小的方法。