網站搜尋

使用 AMD(RequireJS)的 TypeScript 導入自訂 jQuery 外掛


如何在編譯後的 TypeScript 文件中,使最終編譯的 JS 文件在 defines 列表中包含一個 jQuery 插件的 AMD 模組

我有以下 greenify.js 一個 Jquery 插件

       define(["jquery"], function($){
          $.fn.greenify = function() {
          this.css( "color", "green" );
         return this;
      };
 });

greenify.d.ts

interface JQuery
{
   greenify():JQuery;
}

app.ts

import * as $ from "jquery";

var hide = true;
$("button").click(function(){
if(hide){
    $("p").greenify();
    hide = false;      
}else{
    $("p").css( "color", "black" );
    hide = true;
}        
});

有了通常的 TypeScript 配置、typings 配置和 jquery d.ts 文件。這會編譯成 app.js,但不包含

define(["require", "exports", "jquery"], function (require, exports, $) {
"use strict";
var hide = true;
$("button").click(function () {
    if (hide) {
        $("p").greenify();
        hide = false;
    }
    else {
        $("p").css("color", "black");
        hide = true;
    }
});

});

現在使用 requirejs 時,greenify 模組不會被加載。如何才能讓編譯後的文件包含 greenify 模組,以避免出現 TypeError: $(...).greenify 不是一個函數的錯誤