SystemJS打字稿困境？

我似乎無法理解模塊和路徑。我正在編寫一個Chrome擴展，並嘗試使用angular2與typescript。我有一次工作，但我想重組我的目錄。似乎每次我想要獲得項目設置或添加文件或頁面時，都會遇到此問題。有什麼地方可以去了解定位模塊和javascript/typescript文件的規則嗎？SystemJS打字稿困境？

我想要做的是有一個src文件夾我的HTML，CSS（以下/ SASS），和打字稿文件，並與我的HTML，CSS一www文件夾，編譯js文件。我已經安裝了我的咕嚕任務，它們編譯得很好。由於我使用的是Angular 2，並且在擴展模塊中我無法使用內聯腳本，因此我爲每個創建的頁面創建了兩個單獨的腳本，一個src/pages/index-page.ts腳本具有系統設置並直接從www/index.html加載<script src="js/pages/index-page.js"></script>：

declare var System : any; 

System.config({ 
    packages: { 
    appScripts: {      
     defaultExtension: 'js' 
    } 
    } 
}); 

System.import('js/pages/index-boot') 
    .then(null, console.error.bind(console));

而且src/pages/index-boot.ts腳本，它應該加載

import {provide} from 'angular2/core'; 
import {bootstrap} from 'angular2/platform/browser'; 
import {ROUTER_PROVIDERS, APP_BASE_HREF, LocationStrategy, HashLocationStrategy} from 'angular2/router'; 
import {IndexApp} from './index-app'; 

bootstrap(IndexApp, [ 
    ROUTER_PROVIDERS, 
    provide(LocationStrategy, { useClass: HashLocationStrategy }) 
]);

當然，我得到一個網絡故障試圖加載/www/js/pages/index-boot。如果我添加了js，那麼它會加載該文件，但隨後發現錯誤router和index-app。

爲什麼index-page試圖在沒有擴展名的瀏覽器中加載index-boot？我是否需要以不同的方式組織我的文件？有沒有一個網站可以解釋所有這些？我不明白爲什麼我必須爲一個頁面分配三個單獨的代碼文件（系統配置和導入啓動，引導和應用程序）。

來源

2016-03-03 Jason Goemaat

爲什麼索引頁嘗試在沒有擴展名的瀏覽器中加載索引啓動？

因爲你還沒有要求它這樣做。據我所見，你的問題在你的設置中沒有文件夾appScripts，因此defaultExtension：'js'被簡單地忽略。要解決這個問題的簡單方法使用：

System.defaultJSExtensions = true;

查看更多在這裏：defaultJSExtensions

這將讓你在你學習開始如何安裝包中systemjs（packages），但要注意，這個結構已經過時。

作爲出發點angular2 quickstart是個好地方。請注意他們使用名爲「app」的軟件包並將其與它們的文件夾結構進行比較 - 在那裏記下'app'文件夾。

SystemJS您必須爲您的應用程序（index-page.js）設置一次。不適用於每個頁面。然後，您需要一些地方來引導您的angular2應用程序（index-boot.ts），然後包含業務邏輯的其餘應用程序（app.ts和其他所有內容）將解決您的擴展問題，其中包含業務邏輯

來源

2016-03-03 09:14:47 Amid

有一個網站的某個地方來解釋一下嗎？名爲'app'的軟件包是否重要？這與目錄結構有關嗎？相對於html還是頁面？我能像他們的快速入門中的示例那樣使用捆綁包嗎？我可以有多個包嗎？ –

從github上的systemjs自述開始。沒有名字的'app'並不重要 - 它只是一個帶有編譯好的js文件的文件夾名稱。它相對於'System.baseURL'參見更多信息的自述文件。你可以擁有任意數量的包。通常你使用的每個'圖書館'都是一個包，比如rxjs，導演等等。 – Amid

defaultJSExtensions。

System.config({ 
    defaultJSExtensions: true, // Will prepend .js to the module names 
    paths: { 
    '*': '/www/js/pages/*', // If all your module are under /www/js/pages 
    'angular2/*': '/path/to/angular2/*' 
    }, 
    packages: { // I don't see any appScripts package ref in your exemple, you can probably drop that one. 
    appScripts: {      
     defaultExtension: 'js' 
    } 
    } 
});

有了這個配置，你就可以簡單地做System.import('index-boot')

來源

2016-03-03 09:17:49 Ludohen

有沒有辦法告訴angular2和rx使用提供的捆綁包？ –

如果你想使用捆綁包，你必須使用'script'標籤加載它們並放置在'System.config'之前。您還可以簽出[angular2-seed]（https://github.com/mgechev/angular2-seed）項目（使用系統開發和生產） – Ludohen

因此，軟件包名稱需要引用服務器上的目錄，使它成爲自己的模塊？並且該目錄由傳遞給'System.config'的config對象的packages對象中的屬性名稱指定？這與「System.import」加載的內容相對應？例如，如果我有'js/appScripts'並執行'System.import（'js/appScripts/page.js'）'，密鑰是否必須是''js/appScripts'：{...}'？ –

SystemJS打字稿困境？

回答

相關問題