Importowanie jqueryui za pomocą maszynopisu i RequireJS

Question

Mam problemy z poprawnym działaniem jQueryUI. Zanim spróbowałem dodać jQueryUI, samo działanie jQuery działało dobrze.

Z poniższym kodem, aktualnie otrzymuję "TypeError: jQuery nie jest funkcją (...)" w chrome, co jest dziwne, biorąc pod uwagę, że jquery jest oznaczane jako zależność w pliku require.config.

Kompilacja z .ts do .js dzieje się bez błędów.

initApp.ts:

/// <reference path="../../../typings/jqueryui/jqueryui.d.ts"/> 
import * as jQuery from "jquery"; //Works completely fine 
import * as jQueryUI from "jquery-ui"; //Can't even find the module unless 
             //d.ts file is modified 

skompilowany js:

define(["require", "exports", "jquery-ui"], function (require, exports, jQuery) {...} 

jqueryui.d.ts:

/// <reference path="../jquery/jquery.d.ts"/> 
declare module JQueryUI { <unmodified code>} 

//Added this declare 

declare module "jquery-ui" { 
    export = jQuery; 
} 

Require.config.js:

require.config({ 
    baseUrl: "./components/", 
    paths: { 
     "jquery": "./javascripts/lib/jquery-2.1.4", 
     "jquery-ui": "./javascripts/lib/jquery-ui", 
     "go": "./javascripts/lib/go-debug" 
    }, 
    shim: { 
     "jquery": { 
      exports: "jQuery", 
     }, 
     "jquery-ui": { 
      //exports: "jQuery", //Adding this line doesn't fix the problem 
      deps: ["jquery"], 
     } 
    }, 
}); 
require(["./javascripts/initApp"]); 

Drzewo

katalog:

typings/ 
    jquery/ 
     jquery.d.ts 
    jqueryui/ 
     jqueryui.d.ts 
web/ 
    components/ 
     javascripts/ 
      lib/ 
       jquery-2.1.4.js 
       jquery-ui.js 
       require.js 
      initApp.js 
      initApp.ts 
      require.config.js 

Linki do pełnych plików d.ts:

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/jquery/index.d.ts https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/jqueryui/index.d.ts

Każda pomoc będzie mile widziana

Answer 1

Więc co się dzieje, że masz jQuery, które ma eksport, a jQueryUi, który importuje jQuery, powiększa go, a następnie eksportuje $.widget, a nie $.

To dlatego, jak myślę, że już wspomniano,

import * as jQuery from 'jquery-ui'; 

jest problematyczne.

Jak przejść na zauważyć,

import jQueryUi from 'jquery-ui'; 

nie działa, ponieważ jQueryUI nigdy nie jest używany w wartości pozycji i tak robi pomijana przez kompilator, który jest rzeczywiście bardzo przydatna, jeśli trudne, zachowanie, które może ułatwić wykonanie wielu asynchronicznych scenariuszy ładowania.

To, czego potrzebujesz, to sposób, aby powiedzieć TypeScript, aby wykonał import biblioteki, niezależnie od tego, czy jest on rzeczywiście używany, to znaczy, importujemy go dla efektu ubocznego.

szczęście maszynopis ma taką formę importu, które z kolei pochodzi z ECMAScript

import 'jquery-ui'; 

powinno załatwić sprawę, że nie powinien potrzebować podkładek dla jQuery w tych dniach (nie zacytować mi na to mój AMD jest zardzewiały).

Powinieneś potrzebować tylko następujących rzeczy.

import $ from 'jquery'; 
// typescript will not remove this as the point of this syntax is: import for mutations! 
import 'jquery-ui'; 

Nie ma potrzeby modyfikowania require.config(....), ale mogę być błędne odczytanie go.

Ponadto, należy zwrócić uwagę na jquery-ui declarations, co powinieneś zaktualizować (Twój link umarł z powodu pakietu restrukturyzacyjnego) nie zadeklarować eksportu i referencje jQuery jako globalnego który zasysa i bałagan wielu wersji .d.ts scenariusze, ale nie powinny powodować praktycznej różnicy w czasie wykonywania w Twojej sprawie.

Answer 2

Moje początkowe obejście było osadzone w treści mojego pytania. Przepisuję to jako odpowiedź na wytyczne redakcyjne StackOverflow.

Odpowiedź Aluana bezpośrednio odpowiada na niektóre pytania zadane w tym bloku.

---

mogę ręcznie naprawić błąd poprzez edycję skompilowany javascript, aby obejmować zarówno "jquery" i moduły "jquery-ui" i przypisywanie ich do zmiennych:

define(["require", "exports", "jquery", "jquery-ui"], function (require, exports, jQuery, jQueryUI) {...}

Jednak Chciałem kompilator maszynopisów, aby automatycznie to zrobić, lub coś podobnego do ustawienia zarówno jquery-ui jak i jquery jako zależności od mojego pliku.

TypeScript pobiera deklarowaną nazwę modułu i kompiluje ten ciąg w parametrach zależności funkcji AMD define(). Dlatego plik definicji ds.ts w TypeScript musi deklarować moduł przez ten sam ciąg znaków, który reprezentuje moją bibliotekę w require.config.js

Po prostu instrukcja import nie wyzwala żadnej akcji z kompilatora TypeScript. Niezależnie od zmiennej (foo, w tym przypadku) właściwości z modułu/biblioteki są importowane do należy wywołać co najmniej raz i nie mogą być w konflikcie z żadnymi istniejącymi zmiennymi w tym zakresie.

Wcześniej użyłem tej linii:

import * as jQuery from "jquery-ui"

ten zajmowany nazwę zmiennej „jQuery”, a więc funkcja jQuery nie był w stanie dłużej być przypisane do tej nazwy zmiennej, resulging w błąd: "jQuery nie jest funkcją (...)"

Ponieważ jquery-ui po prostu rozszerza bibliotekę jQuery, nigdy nie muszę jej wywoływać. Ale kompilator stał się dla mnie zbyt mądry i postanowił nie kompilować jquery-ui jako zależności w moim zdefiniu (...). To była łatwa naprawa, gdy tylko zdałem sobie sprawę z tego problemu.

kod końcowy

---

initApp.ts

/// <reference path="../../../typings/jqueryui/jqueryui.d.ts"/> 
import * as jQueryUI from "jquery-ui"; 
import uiVar from "./uiVariables"; 
jQueryUI 

skompilowany js:

define(["require", "exports", "jquery-ui"], function (require, exports, jQueryUI) {...}

require.config.js

require.config({ 
    baseUrl: "./components/", 
    paths: { 
     "jquery": "./javascripts/lib/jquery-2.1.4", 
     "jquery-ui": "./javascripts/lib/jquery-ui", 
     "go": "./javascripts/lib/go-debug" 
    } 
}); 
require(["./javascripts/app"]); 

Answer 3

wyprodukowałem mały przykład na GitHub za korzystanie maszynopis 2 z ES 6 modułów i jQuery/jQuery UI z niestandardowych wtyczek, mam nadzieję, że to pomoże: https://github.com/lgrignon/typescript-es6-jquery