更好的辦法利用打字稿導入資源奧裏利亞

我很困惑如何在優雅的方式上奧裏利亞導入我自己的資源。

因爲我要做那種事來導入任何東西：

import { SomeClass } from '../path/to/some/class/';

好，路徑可以根據目錄結構的，我真的不想寫大文章所有的時間越來越多。這是一個有點難看:(

我的問題是，如果奧裏利亞框架有一個支持導入的東西很容易，而不需要編寫資源的所有路徑

這樣的：

import { SomeClass } from 'some-class';

來源

2017-03-16 Lucas de Matos Lannes

有一些方法可以避免這種情況。例如，假設您有一個名爲「models」的文件夾。在這個文件夾裏有幾個類，比如customer.ts,product.ts等。明白了嗎？對！

在src文件夾裏面，創建一個文件名models.ts，在這個文件中你應該導出所有的模型。例如：

models.ts

export * from './models/product'; 
export * from './models/customer';

在你tsconfig.json，在compilerOptions內，更改爲paths對象：

"paths": { 
    "*": [ 
    "./src/*" 
    ] 
}

現在，在其餘該應用程序可以導入您的模型使用：

import { Product } from 'models'; 
import { Product, Customer } from 'models';

希望這有助於！

參考Aurelia bundling fails when using relative import path

來源

2017-03-16 23:47:40

這是一個很好的答案，與我寫的很好地配對。這樣做的一個缺點是，所有的模型都會在第一次導入'models'模塊時加載。在一個足夠大的應用程序中，這可能會導致問題。如果您想將您的應用程序拆分爲多個功能單獨的功能塊，這也會導致問題。 –

是的！它可以使事情變得更容易，但應該小心使用。 –

感謝您的解決方案，@FabioLuz！這正是我所尋找的，我會小心這個缺點;） –

這真的不是一個Aurelia問題，這是一個與作爲ES2015的一部分（因此是TypeScript的一部分）的import語句，您選擇的模塊加載程序及其配置方式有關的問題，也是您自己的選擇構建您的代碼庫。

您的模塊加載器會讀取您在import語句中使用的模塊名稱，例如'aurelia-framework'或'../resources/custom-elements/date-picker'。

目前，沒有瀏覽器直接支持這些import語句，因此我們利用各種模塊加載器來處理此任務。一些例子是RequireJS，SystemJS或者你可以在Webpack世界中使用的各種加載器。這些提供了一些提供友好模塊名稱的能力。通常，這些自定義名稱僅針對通過依賴關係管理器（例如NPM或JSPM）安裝的應用程序的依賴性進行配置。這些友好名稱以某種方式配置。

在SystemJS中，有一個config.js文件（或0.17 beta中的jspm.configjs）。這個文件可以被修改以提供你自己友好的模塊名稱。儘管這可能是有風險的，因爲JSPM是建立在它擁有該文件的假設之上的，因此它可能會覆蓋您在其中所做的任何更改。

在使用RequireJS的Aurelia CLI中，可以在aurelia.json文件中對其進行設置。這個文件被CLI覆蓋的機會比JSPM更少，但它可能會發生。

所有這些被說，我不打算在這個答案中提供這些例子，因爲這個問題的更好的答案是相當內省：如果你不喜歡在導入時不斷輸出長路徑模塊，那麼您需要重新考慮您的深度嵌套項目組織。通過展開項目的源代碼，您可能可以實現相同的目標，而無需冒險創建自定義配置。

來源

2017-03-16 18:35:12

我真的很感謝你的答案的細節。幾周前我開始使用Aurelia和TypeScript，並對我在問題主題中的錯誤表示歉意。這兩種解決方案都很好（但我希望看到一個使用Aurelia CLI的例子：D），而「內省點」對於項目組織的思考很有用。感謝您對ES2015 +模塊裝載機的解答和解釋。 –

更好的辦法利用打字稿導入資源奧裏利亞

回答

相關問題