TypeScript、RequireJS、jQuery 插件答案

【问题标题】：TypeScript, RequireJS, jQuery pluginsTypeScript、RequireJS、jQuery 插件
【发布时间】：2015-08-29 00:56:13
【问题描述】：

我正在学习 TypeScript，但我怕我咬的比我能嚼的多。我找到了

的教程和示例

有一个带有string constants in a module 的文件，然后从每个 ts 文件中使用它
配置编译器创建模块ready to use with RequireJS，并在TypeScript中使用import和module关键字
extending jQuery interface in TypeScript，然后在TS中编写插件代码

但我就是无法一次性完成。

我有 3 个文件，都包含单独的 jQuery 插件，但共享一些常量。我为使用这些的所有页面都有单独的 ts 文件。我想在我的 cshtml 中将这些每页 TS 文件引用为 <script data-main="app/this-page" type="text/javascript" src="lib/require.js"></script>，并让这个页面说“导入我的插件，然后 $("#someId").runMyPlugin(someSettings);”

谁能推荐我一种方法？应该说什么出口？我应该导入什么？一节课有什么？

【问题讨论】：

标签： jquery jquery-plugins requirejs typescript

【解决方案1】：

按照 blorkfish 的回答配置 require 后，问题是说服 typescript 将 jquery 插件的依赖项编译为 AMD 依赖项。这可以使用晦涩的 /// 指令来完成。

以 jquery.cookie 为例，你可以在你的 typecipt 模块中添加这个：

/// <amd-dependency path="jquery.cookie">
import $ = require("jquery");
import ko = require("knockout");
export = yourmodule;

module yourmodule {
    ...
}

将编译成：

define(["require", "exports", "jquery", "knockout", "jquery.cookie"],
        function (require, exports, $, ko) {
    var yourmodule;
    ...
}

所以现在你可以在你的 typescript 模块中使用这个插件了。

【讨论】：

【解决方案2】：

如果你的常量是在一个类中定义的，即 Constants.ts

export class Constants {
   constant1: string = "firstConstant";
   constant2: string = "secondConstant";
}

然后导出这个类，并在需要的地方导入。
即

import ref_Constants = module("./Constants");  
var firstConstant = ref_Constants.Constants.constant1;

使用 AMD 模块会在需要时自动加载 Constants.js。

更新好的，所以要使用 JQuery 的 require.js 导出插件，您需要导出到 $ 符号：
这只能通过 require.config 和 shim 属性来完成。您将需要以下内容：

require.config({
    baseUrl: '../',
    paths: {
        'jquery': 'lib/jquery-1.7.2',
        'myjqueryextension': 'lib/myjqueryextension' // note this is the .js file
    }, 
    shim: {
        jquery: {
            exports: '$'
        },
        myjqueryextension: {
            exports: '$'
        }
    }
});

require(['jquery','myjqueryextension'], 
    ($, myjqueryextension) => {
        // note that your extension will be attached to $ here, because of the shim
        $('#test').myExtensionFunction('foo', 'bar');
    });

这里的重要部分是 shim 中的 exports: '$' 行。这会将您的扩展附加到 $。

【讨论】：

是的。您能否也对 OTHER 部分（键入的 JQuery 插件 + AMD）提出一些建议？
嗯，实际上，它没有。 A module cannot be aliased to a non-module type
事实证明，对于我在非 SPA 页面上到处需要 1-2 个 jquery 插件的情况来说，requirejs 可能是一种过度杀伤力。一旦我删除了requireJS（并从AMD回到CommonJS），一切都像Typescript基本教程一样工作:)

【解决方案3】：

我在设置和 AMD/RequireJS Typescript 工作流程时遇到了类似的问题。我刚刚在 Github 上发布了一个项目示例。

我结合了 Gulp、RequireJS 和 Typescript，而不需要 shim 文件。它还包括获取 Require 和任何供应商文件的任务，将它们与应用程序文件捆绑在一起，并生成一个缩小的 JS 文件，该文件将运行整个应用程序。希望这可以帮助人们。

https://github.com/abogartz/typescript-amd-gulp-example

【讨论】：