編寫一個易於使用的Typescript框架

我一直在開發一個在NPM中發佈的框架，一切正常。但是當我使用我自己的框架作爲外部模塊時，真的很痛苦。我必須設置全進口的路徑是這樣的：編寫一個易於使用的Typescript框架

import { MyService } 'myframework/all/the/internal/path/myservice.service';

而且我必須做出一個不同的import語句從我的框架使用的每個類，服務或Web組件。這是，我想，因爲聲明文件不從頂部index.d.ts文件中導出。

感謝Matthias247，我正確地編寫了reexport文件，其中我導出了框架中的所有類。而當使用它作爲外部NPM模塊，它工作得很好，我可以寫這樣的全進口：

import {MyService, MyClass1, MyClass2, ... } from 'myframework';

現在這個工程，我試圖讓我的編譯JavaScript文件的單一bundle.js是裝通過SystemJS就像@angular模塊一樣。

這就是我真的完全失去了......我不明白什麼是或應該是構建這樣一個包的正確方法。使用browserify，每個命令都會通過將「NO_MODULE_FOUND」寫入到我的bundle.js中失敗。那麼，我試圖用tsify作爲browserify的插件運行，看起來它正在做一個捆綁所有類的正確工作。但沒有什麼問題，它也捆綁了所有的@angular和RxJS。

請有人指示我應該如何生成一個UMD包？我使用「module：commonjs」選項編譯，但任何文件都被browserify識別爲模塊，我真的不知道該怎麼做。

來源

2016-10-23 Elvynia

一個可能的解決方案（和一個我建議）是設置庫的出口更好，這樣你就能夠做到

import {MyService, MyClass1, MyClass2, ... } from 'myframework';

到底，即使這些類型的可能在您的框架的子文件夾中定義。

通常的做法是利用再出口。在您的框架的主文件夾中，您可以使用一些index.ts，同時重新導出對用戶有效的所有類型。

像

export * from 'myframework/all/the/internal/path/myservice.service';

爲了不必從主索引文件中引用的所有類型，你也可以這樣做，在分層方式。例如。在子文件夾中定義一個index.ts文件，如myframework/all/the/internal/path/index.ts，並從其中的文件夾中導出所有類型。然後在較高級別上導出子文件夾：export * from 'myframework/all/the/internal/path';

來源

2016-10-23 07:18:09 Matthias247

那麼我已經這麼做了，正如我所解釋的那樣。我的問題是運行時路徑解析。當我的框架加載爲SystemJS模塊時，它會嘗試在「http：// host/myframework/dist」上導入，但它不起作用，我得到404，因爲它應該轉到「http：// host/myframework/dist /feature/feature.class「或類似的東西。 – Elvynia

你沒有這樣做。你已經寫過你已經實現了一個.d.ts文件，它將改變聲明，但不會影響導出的代碼和運行時加載。我建議寫一個ts文件（no .d）來實現reexports。這會更改生成的代碼並修復運行時問題，因爲導入主索引文件後也會導入其餘的。 – Matthias247

確實！實際上，查看node_modules/@ angular/core索引文件會誤導我，因爲它們使用的是umd包，不需要和我一樣的東西。按照你的建議，我已經有了分層的重新導出，但我只是試圖使用我的假索引（.d.ts和.js）文件。所以現在我用我的dist文件夾中的主要index.js（從一個真正的index.ts生成），它在運行時工作。非常感謝！ :)但我仍然想了解如何使用browserify生成UMD捆綁包，以便在將您的答案標記爲已接受之前編輯我的問題並等待。 – Elvynia

編寫一個易於使用的Typescript框架

回答

相關問題