Hvordan kan jeg kreve jquery AMD-modulen for min Loggfila modul. For eksempel la oss si katalogstruktur for skript ser slik ut:
jQuery-1.8.2.js
jquery.d.ts
module.ts
require.js
Jeg vil ha den genererte js filen fra module.ts å kreve jquery-1.8.2.js lastes via require.js.
Foreløpig har jeg:
import jquery = modul ( 'jquery')
Dette resulterer i Navnet jQuery finnes ikke i dagens omfang.
Det ser ut som standard er i endring igjen, hvor under 0.9+ metoden fortsatt fungerer, men med ES6 kommer følgende modul lasting kunne brukes. (referanse: https://github.com/TypeStrong/atom-typescript/issues/237#issuecomment-90372105 )
import * as $ from "jquery";
og til og med delvis de
import {extend} from "jquery";
(dette krever fortsatt de jquery.d.ts, hvis TSD er installert - tsd install jquery)
å installere TSD: npm install tsd -g
/// <reference path="../../typings/jquery/jquery.d.ts" />
import $ = require('jquery');
//Do your stuff
Og også, hvis jquery.d.ts ikke definerer en ekstern modul, legg følgende til jquery.d.ts:
declare module "jquery" {
export = $;
}
Jeg tror mye av forvirringen rundt dette er på grunn av jQuery egentlig ikke opptre som en ekstern modul, som hemmer bruk av en importuttalelse. Løsningen er ganske ren, enkel og elegant nok til å ikke føle seg som en work-around.
Jeg har skrevet opp et enkelt eksempel på hjelp RequireJS og jQuery i Loggfila , som fungerer som følger ...
Du ta tak i typedefinisjoner fra Definitivt Type for RequireJS og jQuery.
Du kan nå bruke rå RequireJS med statisk typing innsiden av loggfila.
app.ts
///<reference path="require.d.ts" />
///<reference path="jquery.d.ts" />
require(['jquery'], function ($) {
$(document).ready(() => {
alert('Your code executes after jQuery has been loaded.');
});
});
Og da trenger du bare å legge den eneste skriptmerket til siden din:
<script data-main="app" src="require.js"></script>
Fordeler fremfor andre løsninger?
.d.tsfil for)import $ = module("jquery");
declare module "jquery" {
export function (selector: string, context?: any): JQuery;
export function (element: Element): JQuery;
export function (object: { }): JQuery;
export function (elementArray: Element[]): JQuery;
export function (object: JQuery): JQuery;
export function (func: Function): JQuery;
export function (): JQuery;
}
requirejs.config({
paths: {
'jquery': 'js/jquery-1.8.2.min'
}
});
Først får den ( krever-jquery ) fra den offisielle github repo. Etter denne katalogen vil se ut:
require-jquery.js
jquery.d.ts
main.ts
main.js
test.html
Foreløpig er den enkleste måten å jobbe med jQuery og AMD moduler på Loggfila er å skrive følgende på main.ts:
///<reference path="jquery.d.ts" />
declare var require;
require(["jquery"], function($:JQueryStatic) {
$('body').append('<b>Hello JQuery AMD!</b>');
});
Og kaller det fra test.html:
<!DOCTYPE html>
<html>
<head>
<script data-main="main" src="require-jquery.js"></script>
</head>
<body>
<h1>TypeScript JQuery AMD test</h1>
</body>
</html>
Håper dette hjelper!
Du refererer til eksterne moduler av banen og filnavnet (minus JS forlengelse), eller bare etter filnavn hvis de er globale. I ditt tilfelle, bør du gjøre dette inne i module.ts:
import jquery = module('./jquery-1.8.2');
Husk å kompilere med --module AMDsiden som standard får du kode som bruker commonjs requirefunksjon.