SystemJS:加载构建文件 [英] SystemJS: loading build file
问题描述
我的SystemJS文件如下:
My SystemJS file looks like this:
(function(global) {
// map tells the System loader where to look for things
var map = {
'angular2-boot': 'app', // 'dist',
'@angular': 'node_modules/@angular',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'rxjs': 'node_modules/rxjs'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
// 'app': { main: 'js/main.js', defaultExtension: 'js' },
'app': { main: 'dist/build.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { defaultExtension: 'js' }
};
var ngPackageNames = [
...
];
// Add package entries for angular packages
ngPackageNames.forEach(function(pkgName) {
packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
});
var config = {
map: map,
packages: packages
};
System.config(config);
})(this);
在这种情况下，我使用tsconfig.js中的outDir选项将我的打字稿编译到另一个目录中，并使用main:'js/main.js'在软件包中引用了它，效果很好.
In this I transpiled my typescript into a different directory with outDir option in tsconfig.js and referred that in packages using main: 'js/main.js' which works fine.
但是，当我尝试使用outFile选项转换为单个文件并使用main:'dist/build.js'引用该文件时.它不会呈现该页面，并且在控制台中看不到任何错误.
However, when I tried to transpile into single file using outFile option and referred to that file using main: 'dist/build.js'. It doesn't render the page and I don't see any errors in the console.
我的index.html看起来像这样:
My index.html looks like this:
<html>
<head>
<title>Angular 2 QuickStart</title>
<base href="/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="app/css/styles.css">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/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="node_modules/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('angular2-boot').catch(function(err){ console.error(err); });
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
我的tsconfig.js文件如下:
My tsconfig.js file looks like this:
{
"compilerOptions": {
"target": "es5",
"module": "amd",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"outDir": "app/js",
"outFile": "app/dist/build.js"
}
}
加载页面时显示正在加载...".要使用SystemJS加载单个输出已转译的文件，我需要进一步做些什么?
It says Loading... when I load the page. What do I need to do further to load the single output transpiled file using SystemJS?
推荐答案
当您转换为单个文件时，它将生成一种特殊格式的文件，称为捆绑".导入它时，其中的所有模块都已加载并注册到SystemJS中，但不执行任何操作.因此，在捆绑包加载后，您需要在index.html中添加第二个导入，这实际上将启动您的应用程序，如下所示:
When you transpile to a single file, it produces a file in a special format called 'bundle'. When you import it, all the modules in it are loaded and registered in SystemJS, but nothing is executed. So, after the bundle is loaded, you need to add a second import in index.html that will actually start your application, like this:
System.import('app/dist/build.js').then(function() {
System.import('main');
})
.catch(function(err){ console.error(err); });
此代码使用显式路径加载捆绑软件:app/dist/build.js，然后加载名为main的模块，因为该名称必须与捆绑软件中define调用中给出的模块名称完全匹配.因此，此代码中没有任何内容引用systemjs.config.js中定义的angular-boot或app包，因此该文件中无需进行任何更改.
This code uses explicit path to load a bundle: app/dist/build.js, and then loads a module named main because that name must match exactly the module name as it is given in define call in the bundle. So, nothing in this code refers to the angular-boot or app package as it's defined in systemjs.config.js, so nothing needs to be changed in that file.
也可以加载带有普通<script>标签的捆绑包，然后您只需要单个System.import('main').
It's also possible to load a bundle with ordinary <script> tag, then you will need only single System.import('main') after that.
这篇关于SystemJS:加载构建文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
