Typescript + RequireJS Compilerfehler beim Laden des Plugins

Question

Beim Schreiben einer Typescripts-Anwendung, in der ich RequireJS zum Laden der Module verwende (ich verwende Visual Studio 2015).

Ich kann problemlos laden fast alle Module entweder aus .ts-Klassen, die ich selbst geschrieben von externen Bibliotheken mit ihren Typisierung .d.ts-Dateien.

Aber mein Problem beginnt, wo ich ein Plugin für jquery laden möchte.

Ich verwende die Tippdatei für die Bibliothek, aber logisch gibt es keine Moduldefinitionen in der .d.ts-Datei, weil es nur ein Plugin für jquery ist.

Ich habe die Empfehlungen für Shim Bibliothek Laden von RequireJS website wie folgt gefolgt:

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

Und nach dem RequireJS website:

Die Scheibe Config setzt nur Code Beziehungen auf. Um Module zu laden, die Teil einer Shim-Konfiguration sind oder diese verwenden, wird ein normaler Request/Define-Aufruf benötigt. Das Einstellen von Shim selbst löst keinen Code zum Laden aus.

nun weder der folgenden Arbeit zum Laden des Plug-in (auch nach dem jquery.pjax.dt neben den jquery.pjax.js bewegen):

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

Compiler beschwert sich mit dem Fehler Cannot find module "jquery.pjax" oder File C:/foo/bar/jquery.pjax.d.ts is not a module.

Die app.ts wird nicht kompiliert, solange einer der obigen Codes existiert und wenn ich sie entferne, wird das Plugin nicht geladen.

In diesem Zusammenhang verwende ich mehrere Importe in meiner app.ts Datei und es wird mehr geben, ich bevorzuge import Foo = require("foo") oder import * as Foo from "foo" Modul laden Stil im Gegensatz zum Schreiben der AMD Define-Funktion manuell.

Auch ich benutze Nuget Paket-Management und ich bevorzuge es, externe. D.ts oder. Js-Dateien manuell zu bearbeiten/zu verschieben.

Kann mir bitte jemand dabei helfen?

Answer 1

Wenn Sie in die Lage sein wollen require("jquery.pjax") nennt dann entweder es muss ein echter Typoskript-Modul mit diesem Namen definiert und auffindbar sein, oder es muss eine Erklärung über die es irgendwo sein: declare module "jquery.pjax".

Ich denke, Ihre Optionen sind:

• laden jQuery völlig außerhalb RequireJ (zum Beispiel sowohl die jQuery und jQuery.pjax mit einfachen Script-Tags auf Ihrer Seite sind, und sie nur global verwenden). Dies erwartet Sie von der .d.ts-Datei, weil jQuery.pjax eigentlich kein RequireJS-Modul ist (weshalb Sie Ihre Shim-Konfiguration verwenden müssen)
• Fügen Sie ein Modul hinzu Deklaration in Ihre Codebasis und überzeugen Sie TypeScript, dass es ein reales RequireJS-Modul ist. Dies kann entweder innerhalb Ihrer vorhandenen .d.ts-Definition für jquery.pjax oder eigenständig in einer separaten Datei geschehen, wenn dies für Sie einfacher ist. Sie können dies dann verlangen.Beachten Sie, dass TypeScript die Abhängigkeit nicht wirklich ausgibt, wenn Sie sie benötigen und nicht auf sie verweisen. Daher benötigen Sie einen falschen Verweis darauf.

• Verwenden Sie RequireJS manuell, um es außerhalb des TypScript-Modulsystems zu laden. Für Plugin-Ökosysteme wie diese gebe ich normalerweise der realen Bibliothek den Namen 'raw-librarname' in meinen RequireJS-Pfaden und erstelle dann ein neues 'librarname.ts' selbst, welches die rohe Bibliothek und die Plugins einholt und alle notwendigen Einstellungen vornimmt und gibt das Ergebnis zurück (auf das sich normalerweise alle anderen verlassen können). ZB:

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

  Dies stellt sicher, dass alles andere weiterhin als normalerweise jQuery durch RequireJS verwenden, bei gleichzeitiger Gewährleistung noch, dass die Nicht-requirejs Modul (jquery.pjax) fertig sein wird und geladen, bevor sie versuchen, es von jQuery zu verwenden .