我看到你已经有了回应，这当然很好。但是对于那些想要使用systemjs（就像我也这样做）而不是去 webpack 的人，你仍然可以捆绑这些文件。但是，它也涉及使用另一个工具（我使用 gulp）。所以......你会有以下 systemjs 配置（不是在 html 中，而是在一个单独的文件中 - 我们称之为“system.config.js”）：
(function(global) {
// map tells the System loader where to look for things
var map = {
'app': 'dist/app', // this is where your transpiled files live
'rxjs': 'node_modules/rxjs',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api', // this is something new since angular2 rc.0, don't know what it does
'@angular': 'node_modules/@angular'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'boot.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { defaultExtension: 'js' }
};
var packageNames = [
'@angular/common',
'@angular/compiler',
'@angular/core',
'@angular/http',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
//'@angular/router', // I still use "router-deprecated", haven't yet modified my code to use the new router that came with rc.0
'@angular/router-deprecated',
'@angular/http',
'@angular/testing',
'@angular/upgrade'
];
// add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
packageNames.forEach(function(pkgName) {
packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});
var config = {
map: map,
packages: packages
};
// filterSystemConfig - index.html's chance to modify config before we register it.
if (global.filterSystemConfig) { global.filterSystemConfig(config); }
System.config(config);
})(this);
然后，在您的 gulpfile.js 中，您将构建一个这样的包（使用来自system.config.js和tsconfig.json文件的信息）：
var gulp = require('gulp'),
path = require('path'),
Builder = require('systemjs-builder'),
ts = require('gulp-typescript'),
sourcemaps = require('gulp-sourcemaps');
var tsProject = ts.createProject('tsconfig.json');
var appDev = 'dev/app'; // where your ts files are, whatever the folder structure in this folder, it will be recreated in the below 'dist/app' folder
var appProd = 'dist/app';
/** first transpile your ts files */
gulp.task('ts', () => {
return gulp.src(appDev + '/**/*.ts')
.pipe(sourcemaps.init({
loadMaps: true
}))
.pipe(ts(tsProject))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(appProd));
});
/** then bundle */
gulp.task('bundle', function() {
// optional constructor options
// sets the baseURL and loads the configuration file
var builder = new Builder('', 'dist/system.config.js');
/*
the parameters of the below buildStatic() method are:
- your transcompiled application boot file (the one wich would contain the bootstrap(MyApp, [PROVIDERS]) function - in my case 'dist/app/boot.js'
- the output (file into which it would output the bundled code)
- options {}
*/
return builder
.buildStatic(appProd + '/boot.js', appProd + '/bundle.js', { minify: true, sourceMaps: true})
.then(function() {
console.log('Build complete');
})
.catch(function(err) {
console.log('Build error');
console.log(err);
});
});
/** this runs the above in order. uses gulp4 */
gulp.task('build', gulp.series(['ts', 'bundle']));
因此，当运行“gulp build”时，您将获得包含您需要的所有内容的“bundle.js”文件。当然，你还需要一些更多的包来让这个 gulp bundle 任务工作：
npm install --save-dev github:gulpjs/gulp#4.0 gulp-typescript gulp-sourcemaps path systemjs-builder
另外，请确保在您的 tsconfig.json 中有"module":"commonjs". 这是我的 gulp'ts'任务中使用的 tsconfig.json ：
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules",
"typings/main",
"typings/main.d.ts"
]
}
然后，在您的 html 文件中，您只需要包含以下内容：
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="dist/app/bundle.js"></script>
就是这样......我从 600 个请求，大约 5 秒内得到 4mb......到 20 个请求，1.6 秒内得到 1.4mb（本地开发机器）。但是这 20 个请求在 1.6 秒内约 1.4mb 还包括管理主题附带的一些其他 js 和 css 以及一些在第一次加载时需要的 html 模板，我更喜欢使用外部模板 - templateUrl: ''，而不是内联的，写在我的 component.ts 文件中。当然，对于拥有数百万用户的应用程序来说，这仍然不够。还应该实现初始加载和缓存系统的服务器端渲染，我实际上设法用 angular 通用来做到这一点，但是在 Angular2 beta 上（大约需要200-240 毫秒来加载上面需要 1.6 的相同管理应用程序的初始渲染秒 - 我知道：哇！）。现在它不兼容，因为 Angular2 RC 出来了，但我相信做通用的人很快就会加快速度，特别是因为 ng-conf 即将推出。另外，他们还计划为 PHP、ASP 和其他一些工具制作 Angular Universal——现在它只适用于 Nodejs。
编辑：
实际上，我刚刚发现在 NG-CONF 上，他们说 Angular Universal 已经支持 ASP（但它不支持 Angular2 > beta.15 :)）……但是让我们给他们一些时间，RC 刚来几天前出来
