使用WebPack + TypeScript定義導入的外部模塊

Question

我正在嘗試使用TypeScript和一些外部庫來設置WebPack，但是遇到了一些麻煩。

我正在導入jQuery的src版本，以便讓WebPack選擇所需的模塊（這是使Boostrap-SASS加載程序正常工作所必需的），因此在TS中導入這樣的庫：

import jquery = require( 'jquery/src/jquery.js' );

編譯時，拋出此錯誤， cannot find external module 'jquery/src/jquery' 。 如果我創建一個手動的.d.ts文件來定義庫，如下所示：

declare module "jquery/src/jquery"{}

然后編譯器可以工作，但是警告：

cannot invoke an expression whose type lacks a call signature

或者，如果我將導入行更改為

var jquery = require( 'jquery/src/jquery' );

（我認為這是CommonJS樣式的導入嗎？）然后全部編譯（並運行）。 所以，問題：

• 有沒有更好的方法來使用WebPack要求/包括源文件？
• 定義模塊以使其不缺少調用信號的正確方法是什么？
• 我應該擔心使用var而不是import或者在工作時滾動它嗎？

我只是選擇了WebPack，所以我很可能在做一些愚蠢的事情。 如果是這樣，請糾正我！

編輯：

當我在思考如何表達這個問題時，我想到了：

declare module "jquery/src/jquery" { export = $; }

這似乎讓我使用“導入...”-但這是處理此問題的好方法嗎？

編輯2：

回復下面的@basarat的回答（我的評論有點長，沒有換行符）：

我已經在使用DefinitelyTyped的jquery def，但它本身無法工作，因為我需要的模塊是“ jquery / src / jquery”而不只是“ jquery” 。 如果我使用“ jquery”，則將加載jquery的已編譯發行版，這不適用於Bootstrap加載程序。

因此， declare module "jquery/src/jquery" { export = $; } 我認為declare module "jquery/src/jquery" { export = $; }是擴展現有定義，但使用的是我需要從中加載的路徑。

Answer 1

import jquery = require（'jquery / src / jquery.js'）;

使用絕對類型定義的jquery代替： https : //github.com/borisyankov/DefinitelyTyped/blob/master/jquery/jquery.d.ts#L3158-L3160已經允許您import jquery = require('jquery') 。

Answer 2

為了回答我自己的問題，這就是我最終要做的。

注意：我不知道這是否是實現此目標的“正確”方法（我懷疑不是），所以我願意接受答案更好的任何人！

在我的TS定義文件tsd.d.ts中，我有絕對類型的jQuery定義：

/// <reference path="jquery/jquery.d.ts" />

但是僅靠這還不足以使編譯器從node_modules文件夾中拾取jQuery源文件。

因此，我進一步添加了tsd.d.ts：

declare module "jquery/src/jquery"
{
    export = $;
}

編譯器現在可以找到jQuery源文件。

我還必須編輯一個jQuery源文件，以使WebPack編譯器很好地使用它：默認情況下， selector.js不包含出廠函數，並且WebPack需要一個工廠函數。

有一個加載器說可以解決此問題，但是我無法使其正常工作，因此我只是將選擇器.js中的代碼更改為：

define([ "./selector-sizzle" ], function(){});

這一切都讓人覺得有些棘手...但是這讓我克服了這個特別的障礙。