Question

在编写一个Typescripts应用程序时，我使用RequireJS来加载模块（我使用Visual Studio 2015）。

我可以使用键入.d.ts文件从外部库中自己编写的.ts类中轻松加载几乎所有模块。

但我的问题从我想为jquery加载插件的地方开始。

我正在使用库的输入文件，但从逻辑上讲，.d.ts文件中没有模块定义，因为它只是jquery的一个插件。

我已按照RequireJS website加载shim库的建议，如下所示：

requirejs.config({
baseUrl: "Scripts",
paths: {
    "jquery": "jquery-2.2.3",
    "jquery.pjax": "jquery.pjax"
},
shim:
{
    "jquery.pjax":
    {
        deps: ["jquery"],
        exports: "jQuery.fn.pjax"
    }
}
});
require(["app"]);

根据RequireJS website：

shim配置只设置代码关系。要加载属于或使用shim config的模块，需要正常的require / define调用。设置填充程序本身不会触发加载代码。

现在，以下两种方法都没有用于加载插件（即使在jquery.pjax.js旁边移动jquery.pjax.d.t之后）：

import * as pjax from "jquery.pjax";

import pjax = require("jquery.pjax");

import pjax = require("./jquery.pjax");

import pjax = require("jquery.pjax.js");

import pjax = require("./jquery.pjax.js");

编译器抱怨错误Cannot find module "jquery.pjax"或File C:/foo/bar/jquery.pjax.d.ts is not a module。

只要上述任何代码存在，app.ts就不会被编译，当我删除它们时，插件就不会被加载。

关于我在我的app.ts文件中使用了几个导入，并且会有更多，我更喜欢使用import Foo = require("foo")或import * as Foo from "foo"模块加载样式，而不是手动编写AMD定义函数。

我也在使用Nuget包管理，我不想手动编辑/移动外部.d.ts或.js文件。

有人可以帮我解决这个问题吗？

Answer 1

如果您希望能够调用require("jquery.pjax")，则需要定义一个真实的TypeScript模块并使用该名称查找，或者需要在某处声明它：declare module "jquery.pjax"。

我认为你的选择是：

完全在RequireJ之外加载jQuery（例如，在页面中包含jQuery和jQuery.pjax以及普通脚本标记，并且只在全局使用它们）。这就是你所拥有的.d.ts文件所期望的，因为jQuery.pjax实际上根本不是一个RequireJS模块（这就是为什么你必须使用你的shim配置）
在您的代码库中添加一个模块声明，并说服TypeScript它是一个真正的RequireJS模块。这可以在jquery.pjax的现有.d.ts定义中，也可以在单独的文件中独立，如果这对您来说更容易。然后你可以要求这个。请注意，如果您需要它并且不引用它，TypeScript实际上不会输出依赖项，因此您需要对它进行虚假引用。

在TypeScript的模块系统外部手动使用RequireJS加载它。对于像这样的插件生态系统，我通常会在我的RequireJS路径中给真正的库命名为'raw-libraryname'，然后自己创建一个新的'libraryname.ts'，它会引入原始库和插件，需要进行任何设置，并返回结果（其他人可以正常依赖）。 E.g：

// Require config:
requirejs.config({
    baseUrl: "Scripts",
    paths: {
        "raw-jquery": "jquery-2.2.3", // only plugins depend on this
        "jquery.pjax": "jquery.pjax",
        "jquery": "lib-wrappers/jquery" // everything else uses this which
                                        // includes all your plugins
    },
    shim:
    {
        "jquery.pjax":
        {
            deps: ["raw-jquery"]
            // I don't think you need an exports here.
            // Anybody who wants this should be using it from jQuery.
        }
    }
});   



// in lib-wrappers/jquery.ts
define(["raw-jquery", "jquery.pjax"], function ($) {
    // RequireJS guarantees that this line is run before anything that
    // depends on jQuery, and after both jQuery & any plugins above are loaded
    return $;
});

这确保了其他所有内容都可以通过RequireJS继续使用jQuery，同时仍然保证非requirejs模块（jquery.pjax）在尝试从jQuery使用之前就已准备好并加载。

加载插件

1 个答案: