使用 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 风格的导入？）然后它就可以正常编译（并运行）了。所以，问题：

有没有更好的方法 requiring/including 使用 WebPack 的源文件？
定义模块的正确方法是什么，这样它就不会缺少调用信号？
我是否应该担心使用 var 而不是 import 还是如果它有效就顺其自然？

我才刚刚接触 WebPack，所以我完全有可能在做一些愚蠢的事情。如有请指正！

编辑：

当我在思考如何表达这个问题时，我想到了这个问题：

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

这似乎让我可以使用 "import..." - 但这是处理这个问题的好方法吗？

编辑 2：

在下面回复@basarat 的回答（我的评论有点长，不能换行）：

我已经在使用来自 DefinitelyTyped 的 jquery def，但它本身无法工作，因为我需要的模块是 "jquery/src/jquery" 而不仅仅是 "jquery"。如果我使用 "jquery" 然后编译的 dist 版本的 jquery 被加载，这不适用于 Bootstrap 加载器。

因此，我认为 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

为了回答我自己的问题，这就是我最终所做的。

注意我不知道这是否是实现此目标的 "correct" 方式（我怀疑不是），所以我欢迎任何有更好答案的人！

在我的 TS 定义文件中 tsd.d.ts 我有 Definitely Typed 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 需要一个。

有一个 loader that says it fixes this 但我无法让它工作，所以我只是将 selector.js 中的代码更改为：

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

这一切感觉有点老套...但它让我克服了这个特殊的障碍。

使用 WebPack + TypeScript 定义导入的外部模块

Defining an imported external module with WebPack + TypeScript

javascript

jquery

typescript

webpack