Erreur de compilation Typescript + RequireJS lors du chargement du plugin

Question

Lors de l'écriture d'une application Typescripts où j'utilise RequireJS pour charger les modules (j'utilise Visual Studio 2015).

Je peux facilement charger presque tous les modules à partir des classes .ts que j'ai écrites moi-même depuis des bibliothèques externes en utilisant leur fichier .d.ts.

Mais mon problème commence là où je veux charger un plugin pour jquery.

J'utilise le fichier de frappe pour la bibliothèque, mais il n'y a logiquement aucune définition de module dans le fichier .d.ts car il s'agit juste d'un plugin pour jquery.

J'ai suivi les recommandations pour le chargement de la bibliothèque shim de RequireJS website comme ceci:

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"]); 

Et selon le RequireJS website:

La configuration shim définit uniquement des relations de code. Pour charger des modules faisant partie de ou utiliser shim config, un appel require/define normal est nécessaire. Définir shim par lui-même ne déclenche pas le code à charger.

Maintenant, aucun des travaux suivants pour le chargement du plug-in (même après avoir déplacé le jquery.pjax.dt à côté des jquery.pjax.js):

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

compilateur se plaint avec l'erreur Cannot find module "jquery.pjax" ou File C:/foo/bar/jquery.pjax.d.ts is not a module.

L'app.ts n'est pas compilé tant que l'un des codes ci-dessus existe et lorsque je le supprime, le plugin n'est pas chargé. En ce qui concerne ce que j'utilise plusieurs importations dans mon fichier app.ts et il y en aura plus, je préfère utiliser le style de chargement de module import Foo = require("foo") ou import * as Foo from "foo" en opposition à l'écriture manuelle de la fonction AMD define.

Aussi j'utilise la gestion des paquets Nuget et je préfère ne pas modifier/déplacer manuellement les fichiers externes .d.ts ou .js.

Quelqu'un peut-il m'aider à comprendre cela s'il vous plaît?

Answer 1

Si vous voulez être en mesure d'appeler require("jquery.pjax") alors soit il doit y avoir un véritable module tapuscrit défini et trouvable avec ce nom, ou il doit y avoir une déclaration de quelque part: declare module "jquery.pjax".

Je pense que vos options sont:

• charge jQuery totalement en dehors RequireJ (par exemple comprennent à la fois jQuery et jQuery.pjax avec des balises de script clair dans votre page, il suffit de les utiliser dans le monde). C'est ce que le fichier .d.ts que vous avez vous attend, parce que jQuery.pjax n'est pas du tout un module RequireJS (c'est pourquoi vous devez utiliser votre config shim)
• Ajouter un module déclaration dans votre code et persuader TypeScript que c'est un vrai module RequireJS. Cela peut être soit dans votre définition .d.ts existante pour jquery.pjax, ou autonome dans un fichier séparé si c'est plus facile pour vous. Vous pouvez alors l'exiger.Notez que si vous en avez besoin et que vous ne le référencez pas, TypeScript n'exécutera pas réellement la dépendance, vous aurez donc besoin d'une fausse référence.

• Utilisez RequireJS manuellement pour le charger, en dehors du système de modules de TypeScript. Pour les écosystèmes de plug-in comme celui-ci, je donne normalement le nom 'raw-libraryname' dans mes chemins RequireJS, puis je crée un nouveau 'libraryname.ts', qui récupère la bibliothèque brute et les plugins. et renvoie le résultat (sur lequel tout le monde peut normalement compter). Par exemple:

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

  Cela garantit que tout le reste peut continuer à utiliser jQuery par RequireJS comme normalement, tout en garantissant que le module non-requirejs (jquery.pjax) sera prêt et chargé avant d'essayer de l'utiliser de jQuery .