使用AMD将jQuery和其他第三方库作为模块导入到打字稿中

时间:2021-01-07 04:51:00

Question: Is there a way to import jquery into a TypeScript module using the AMD support (via the compiler) so it includes jquery as a dependency?

问:是否有一种方法可以使用AMD支持(通过编译器)将jquery导入到一个打字稿模块中,使它包含jquery作为一个依赖项?

The key is to get the import statement, which makes the module a dependency in the define statement (see below).

关键是获取import语句,这使得模块在define语句中是一个依赖项(见下)。

define(["require", "exports", 'dataservice', 'jquery', 'knockout'], 
    function(require, exports, __ds__, $ , ko) { 
         ...
    }
)

Details: I want to import jquery (and other 3rd party libraries) as a TypeScript modules with AMD. The goal is to make them appears as a dependency in the require list. However, the only way to make TypeScript to do this appears to be to have an import statement. And to have an import you need a module to import. But ... there is no jquery module to point to. to.

详细信息:我想导入jquery(和其他第三方库)作为与AMD的打字文件模块。目标是使它们成为需求列表中的一个依赖项。然而,使打字稿实现此目的的唯一方法似乎是拥有一个导入语句。要有导入,需要一个模块来导入。但是…没有要指向的jquery模块。出现。

Workarounds:

解决方法:

  1. I can refer to the .d.ts and preload jquery in the main.js for require.js, but that means preloading all 3rd party libraries. Not terrible, but not ideal either as it doesnt take advantage of what we can already do with JavaScript and AMD.
  2. 我可以参考。d。主要是ts和预加载jquery。js的需要。但这意味着要预加载所有第三方库。不是很糟糕,但也不是很理想,因为它没有利用我们已经可以用JavaScript和AMD做的事情。
  3. I can create a module for each 3rd party library and wrap it, but then I get something like $.$. Which is even worse, IMO (and Irisk writing the wrong module code for each of these and getting out of synch).
  4. 我可以为每个第三方库创建一个模块并对其进行包装,但之后会得到$.$之类的东西。更糟糕的是,在IMO上(我有可能为每一个模块编写错误的模块代码,从而导致不同步)。

So for now I am just preloading jquery in the main.js. but again, but this is less than ideal. Would have to do that for any library like knockout, backbone, etc that has no module.

现在我只是在main.js中预加载jquery。但这又不是最理想的。对于任何没有模块的库,比如knockout、中枢等,都需要这样做。

Any better suggestions or something I am missing?

还有什么更好的建议吗?

Update/Clarification:

更新/澄清:

I can also use shims in the config for dependencies amongst the libraries. But this still preloads the 3rd party ones. Example:

我还可以在配置中使用shims来表示库之间的依赖关系。但这仍然会预载第三方。例子:

require.config({
    baseUrl: '../',
    paths: {
        'jquery': 'lib/jquery-1.7.2',
        'underscore': 'lib/underscore'
    }, 
    shim: {
        jquery: {
            exports: '$'
        },
        underscore: {
            exports: '_'
        }
    }
});

1 个解决方案

#1


4  

One other work around would be use a type definition for requirejs and use your own require statements, rather than an import statement.

另一个解决方案是为requirejs使用类型定义,并使用自己的require语句,而不是import语句。

The downside to this is that the TypeScript import can be used with AMD or CommonJS with just a compiler change, so you would be marrying requirejs in your program more than you would be with an import.

这样做的缺点是,打字稿导入可以与AMD或CommonJS一起使用,只需要对编译器进行修改,因此,与导入相比,您在程序中更多地使用了requirejs。

There is an existing definition for requirejs on Definitely Typed.

对requirejs的定义是明确的。

#1


4  

One other work around would be use a type definition for requirejs and use your own require statements, rather than an import statement.

另一个解决方案是为requirejs使用类型定义,并使用自己的require语句,而不是import语句。

The downside to this is that the TypeScript import can be used with AMD or CommonJS with just a compiler change, so you would be marrying requirejs in your program more than you would be with an import.

这样做的缺点是,打字稿导入可以与AMD或CommonJS一起使用,只需要对编译器进行修改,因此,与导入相比,您在程序中更多地使用了requirejs。

There is an existing definition for requirejs on Definitely Typed.

对requirejs的定义是明确的。