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：加載構建文件

回答

相關問題