SystemJS：加载构建文件

我SystemJS文件看起来像这样：SystemJS：加载构建文件

(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);

在此我transpiled我的打字稿到不同的目录，在tsconfig.js OUTDIR选项，并提到，在包中使用主：“JS/main.js'工作正常。

但是，当我尝试使用outFile选项将其转换为单个文件并使用main：'dist/build.js'引用该文件时。它不呈现页面，我在控制台中看不到任何错误。

我的index.html是这样的：

<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文件看起来像这样：

{ 
    "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加载单输出传输文件？

来源

2016-09-27 would_like_to_be_anon

看看浏览器中的网络选项卡，因为我怀疑文件没有加载。 – WiredPrairie

我看到build.js被加载。它有200个返回代码，我也可以看到build.js源代码。 –

当您将文件转换为单个文件时，它会生成一个名为'bundle'的特殊格式的文件。当你导入它时，它中的所有模块都被加载并在SystemJS中注册，但没有任何执行。因此，后束被装载，就需要在index.html添加第二个进口实际上将启动应用程序，如：

System.import('app/dist/build.js').then(function() { 
     System.import('main'); 
    }) 
    .catch(function(err){ console.error(err); });

该代码使用显式路径来加载包：app/dist/build.js，然后加载名为main的模块，因为该名称必须与该包中的define调用中给出的模块名称完全匹配。因此，此代码中的任何内容均不涉及中定义的angular-boot或app包，因此该文件中无需更改任何内容。

也可以使用普通的<script>标签加载一个包，然后你只需要一个System.import('main')。

来源

2016-09-28 06:45:27 artem

SystemJS：加载构建文件

回答

相关问题