多個TypeScripts文件配置

這裏是愚蠢和簡單的問題：我是這個整個webpack工具的新手。多個TypeScripts文件配置

我一直在嘗試使用typescript和webpack來構建一個簡單的web應用程序。在過去，我創建了打字稿並對其進行編譯而不捆綁它們。

使用webpack，我已經安裝了必要的加載器，打字稿和jQuery。問題是，我有3個打字稿文件：

main.ts - >導入所有資產（圖像，CSS）和其他打字稿
functions.ts - >包括我所有的自定義函數/模塊
UI-controller.ts

在functions.ts我始終創建命名空間，如

：

module Functions{ 
    export module StringTools{ 
     export function IsEmpty(): boolean{ 
      //some code 
     } 
    } 
}

在瀏覽器中，我知道上面的代碼片段將被調用，但是它在main.ts中（在運行時）無法識別，即使您已經導入它。這是我如何將其導入main.ts：

import '.src/functions'

任何建議，我怎麼能解決這個問題？

來源

2017-10-16 Eldon Lesley

打字稿module關鍵字是混亂的，在1.5版本中，它確實是更改爲namespace以更好地反映它的含義。看看here。

名稱空間也稱爲內部模塊。它們旨在用於在全局範圍內評估文件時使用。您可以使用打字稿操場來查看命名空間是如何轉換的。重點是 - 命名空間不是模塊。

然而，Webpack並不評估全局範圍內的文件，而是在一個函數內對它們進行評估，以提供真實的模塊行爲。

那麼什麼讓你的打字稿文件模塊？關鍵字export和import（但不在您的示例中的名稱空間內）。

打字稿會看到這些關鍵字，並將它們transpile到CommonJS的\ AMD \ ES6 require或define聲明，根據tsconfig.json配置。現在你有了「真正的」模塊。然後，Webpack的工作就是使用這些模塊做一些事情（包括關於在線的大量信息），以便它們可以在沒有模塊的瀏覽器中工作，但這部分與打字稿無關。

TL; DR - 那麼你如何在Webpack中做到這一點？

/* functions.ts */ 
export function IsEmpty(): boolean{ 
    //some code 
}

和

/* main.ts */ 
import {isEmpty} from './functions';

如果你想更好的組織代碼由您使用的 module StringTools的建議

，只是分成不同的文件。你可以閱讀更多關於es6 import語法的更多信息。

來源

2017-10-16 12:38:30

因此，它需要我通過使用導入由於webpack更改結構？ –

不，但我認爲擺脫名稱空間是正確的方式來做到這一點。如果你想做最小的改動，做'export module Functions'，並從'main.ts'做'import {Functions} from'.src/functions'' –

這個答案的第一部分是你的主要module（已經替換爲namespace關鍵字）不出口......所以沒有出口成員你的函數文件。

export namespace Functions { //...

答案的第二部分是如果你正在使用的模塊，you don't need to use namespaces as the module is enclosed within its own scope。

工作版本的文件，你設計的話，我會說降包裝命名空間：

functions.ts

export namespace StringTools{ 
    export function IsEmpty(): boolean{ 
     //some code 
    } 
}

來源

2017-10-16 12:36:14 Fenton

是的，它工作正常，但與捆綁的webpack，不知何故它不起作用 –

多個TypeScripts文件配置

回答

相關問題