我正在尝试使用Typescript编译器和outFile函数将我的源捆绑到一个文件中，并使用systemjs正常加载。
当我运行tsc命令时，我得到了一个很好的bundle.js，其中包括我的main代码。当我在浏览器（apache或lite服务器）中加载它时，bundle.js首先按预期加载，然后systemjs启动并开始分别加载所有.js文件 - main.js，app.component.js等。没有错误 - 它只是工作，但它不应该加载所有单独的.js文件..
我看了很多相关的帖子（Load combined modular typescript file with SystemJS），但似乎无法找到我做错了什么..
的index.html
<!doctype html>
<html lang="en">
<head>
<base href="/">
<meta charset="UTF-8">
<title>Solid Timesheet: Time-tracking made easy!</title>
<link rel="stylesheet" href="css/main.css">
<script type="text/javascript">
// temporary hack for enable bootstrap 4
window.__theme = 'bs4';
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
var localhost = document.location.href.match(/^http:\/\/localhost/);
ga('create', 'UA-18982324-19', localhost ? 'none' : 'auto');
</script>
<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/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.min.js"></script>
<script src="node_modules/systemjs/dist/system.js"></script>
<script src="node_modules/rxjs/bundles/Rx.min.js"></script>
<script src="node_modules/angular2/bundles/router.min.js"></script>
<script src="node_modules/angular2/bundles/http.min.js"></script>
<script src="node_modules/angular2/bundles/angular2.min.js"></script>
<script src="node_modules/ng2-bootstrap/bundles/ng2-bootstrap.min.js"></script>
<script src="bundle.js"></script>
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
},
"ng2-bootstrap": {
"defaultExtension": "js"
},
},
map: {
'ng2-bootstrap': 'node_modules/ng2-bootstrap/bundles/',
moment: 'node_modules/moment/moment.js',
}
});
System.import('app/main')
.then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->
<body>
<div class="container">
<my-app>Loading...</my-app>
</div>
</body>
</html>
tsconfig.json
{
"compilerOptions": {
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"module": "system",
"removeComments": true,
"sourceMap": false,
"noImplicitAny": false,
"outFile": "bundle.js"
},
"exclude": [
"node_modules",
"typings"
]
}
我正在使用打字稿1.8.9
我也遇到了这个问题。我能够在我的tsconfig和SystemJS-Builder中使用outDir（而不是outFile）将我的应用程序捆绑到一个文件（例如一个网络请求）中（请参阅full source和live example）。
system.config.js
var map = {
'app': 'dist/js',
'rxjs': 'lib/js/rxjs',
'angular2-in-memory-web-api': 'lib/js/angular2-in-memory-web-api',
'@angular': 'lib/js/@angular'
};
var packages = {
'app': { main: 'main', 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',
'@angular/router-deprecated',
'@angular/testing',
'@angular/upgrade',
];
packageNames.forEach(function(pkgName) {
packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});
System.config({
map: map,
packages: packages
});
tsconfig.json
{
"compilerOptions": {
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"module": "system",
"moduleResolution": "node",
"outDir": "public/dist/js",
"sourceMap": true,
"target": "ES5"
},
"exclude": [
"node_modules"
],
"filesGlob": [
"src/**/*.ts",
"typings/*.d.ts"
]
}
的index.html
<!DOCTYPE html>
<html lang="en">
<head>
<base href="/">
<title>Hello World</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="dist/css/styles.min.css"> <!--compiled global scss styles-->
<script src="lib/js/vendors.min.js"></script> <!--bundled dependencies-->
<script src="dist/js/app.min.js"></script> <!--bundled source-->
</head>
<body class="container">
<my-app>Loading...</my-app>
</body>
</html>
gulpfile.js
一组使用tsc编译的任务，以及用于捆绑应用程序的systemjs-builder。
// Compile TypeScript to JS
gulp.task('compile:ts', function () {
return gulp
.src(tscConfig.filesGlob)
.pipe(sourcemaps.init())
.pipe(tsc(tscConfig.compilerOptions))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('public/dist'));
});
// Generate systemjs-based builds
gulp.task('bundle:js', function() {
var builder = new sysBuilder('public', './system.config.js');
return builder.buildStatic('app', 'public/dist/js/app.min.js');
});
// Minify JS bundle
gulp.task('minify:js', function() {
return gulp
.src('public/dist/js/app.min.js')
.pipe(uglify())
.pipe(gulp.dest('public/dist/js'));
});
这是因为您需要从SystemJS配置中删除此块：
System.config({
packages: {
app: { // <-----------
format: 'register',
defaultExtension: 'js'
},
(...)
}
});
指定outFile属性时，TypeScript编译器会生成一个文件，该文件按名称显式注册模块，如下所示：
System.register('app.component', [ ...
它们不像以前那样是匿名模块。这样您就不需要配置SystemJS来将JS文件与模块名称相关联（您使用packages块执行的操作）。
有关详细信息，请参阅此问题：