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 = $; }

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

编辑2：

回复@ basarat下面的答案（我的评论有点长，无需换行就可以阅读）：

我已经使用了DefinitelyTyped中的jquery def，但它本身不起作用，因为我要求的模块是“jquery / src / jquery”而不仅仅是 “jquery的”即可。如果我使用“jquery”，那么加载了jquery的编译dist版本，这对于Bootstrap加载器不起作用。

因此，我认为declare module "jquery/src/jquery" { export = $; }扩展了现有的定义，但使用了我需要的路径来加载它。

Answer 1

import jquery = require（＆＃39; jquery / src / jquery.js＆＃39;）;

使用jquery的明确类型定义：https://github.com/borisyankov/DefinitelyTyped/blob/master/jquery/jquery.d.ts#L3158-L3160已允许您执行import jquery = require('jquery')。

Answer 2

要回答我自己的问题，这就是我最终要做的事情。

NB我不知道这是否是正确的＆＃34;实现这一目标的方式（我怀疑不是这样），所以我对任何有更好答案的人开放！

在我的TS定义文件tsd.d.ts中，我有绝对类型的jQuery定义：

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

但就其自身而言，这还不足以让编译器从 node_modules 文件夹中获取jQuery源文件。

在tsd.d.ts进一步说明我已经补充道：

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

编译器现在可以找到jQuery源文件。

我还必须编辑一个用于WebPack编译器的jQuery源文件才能很好地使用它： selector.js 默认情况下不包含工厂函数，而WebPack需要一个人在场。

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

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

这一切都让人觉得有点hacky ......但它让我超越了这个特殊的障碍。

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

2 个答案: