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

时间:2015-05-25 15:15:31

标签: javascript jquery typescript webpack

我正在尝试使用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 = $; }扩展了现有的定义,但使用了我需要的路径来加载它。

2 个答案:

答案 0 :(得分:0)

  

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')

答案 1 :(得分:0)

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

NB我不知道这是否是正确的"实现这一目标的方式(我怀疑不是这样),所以我对任何有更好答案的人开放!

在我的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 ......但它让我超越了这个特殊的障碍。