vendredi 1 juillet 2016

Typescript with amd (requirejs) import custom jquery plugin

How do you make the compiled typescript file include a jquery plugin amd module in the final compiled js file in the defines list

I have the following greenify.js a Jquery plugin

       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;
}        
});

With the usual typescript config ,typings config and jquery d.ts files.this compiles to app.js which does not inclue

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;
    }
});

});

Now using requirejs the greenify module will not be loaded.How can one make the compiled file include the greenify module to avoid the TypeError: $(...).greenify is not a function

Aucun commentaire:

Enregistrer un commentaire