Как требует JQuery с помощью AMD в машинописном

Question

Как требует JQuery с помощью AMD в машинописном

голоса

16

Как мне требуется Jquery модуль AMD для моей машинописи модуля. Например, скажем, структура каталогов для сценариев выглядит следующим образом:


    JQuery-1.8.2.js
    jquery.d.ts
    module.ts
    require.js

Я хочу, чтобы сгенерированный JS файл из module.ts требует JQuery-1.8.2.js быть загружены через require.js.

В настоящее время у меня есть:


    импорт JQuery = модуль ( 'JQuery')

Это приводит к тому Название «JQuery» не существует в текущем контексте.

requirejs typescript

Задан 06/10/2012 в 21:40
источник пользователем Mizzle-Mo

На других языках...

5 ответов

Poul K. Sørensen · Answer 1 · 2013-09-01 21:04

ДЛЯ машинопись 1.7+

Похоже , что стандарт снова меняется, где ниже 0.9+ метод все еще работает, но с ES6 приходит следующий модуль загрузка может быть использована. (ссылка: https://github.com/TypeStrong/atom-typescript/issues/237#issuecomment-90372105 )

import * as $ from "jquery";

и даже частичные

import {extend} from "jquery";

(это по- прежнему требуют jquery.d.ts, если установлен ТСД - tsd install jquery)

установить ТСД: npm install tsd -g

ДЛЯ машинопись 0.9+

/// <reference path="../../typings/jquery/jquery.d.ts" />
import $ = require('jquery');

//Do your stuff

А также, если ваш jquery.d.ts не определяет внешний модуль, добавьте следующий jquery.d.ts:

declare module "jquery" {
    export = $;
}

Fenton · Answer 2 · 2013-01-26 14:44

Я думаю, что много путаницы вокруг это связано с JQuery на самом деле не действует как внешний модуль, который ингибирует использование importзаявления. Решение очень чистое, простое и достаточно , чтобы не чувствовать себя как обходные элегантное.

Я написал простой пример Использования RequireJS и JQuery в машинописном , который работает следующим образом ...

Вы хватаете определения типа из Определенно типизированных для RequireJS и JQuery.

Теперь вы можете использовать сырые RequireJS со статической типизации внутри файла машинопись.

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

И тогда вам нужно только добавить один тег сценария на странице:

<script data-main="app" src="require.js"></script>

Преимущества по сравнению с другими решениями?

Вы можете обновить JQuery и RequireJS независимо друг от друга
Вы не должны полагаться на прокладку проекта обновляется
Вам не нужно вручную загружать JQuery (или что - нибудь еще , что это не «как модуль» , что у вас есть .d.tsфайл)

IgorM · Answer 3 · 2012-10-09 15:59

Возьмите основные jquery.d.ts из источника TS ( TypeScriptFile )
Переместить () заявление от JQueryStatic в модуль, как это:
в модуле кода импорта JQuery:

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

Составьте свой модуль, как AMD (TSC --module драм my_code.ts)
Используйте requirejs, чтобы составить свое приложение на стороне клиента со следующей секцией конфигурации:

requirejs.config({
   paths: {
      'jquery': 'js/jquery-1.8.2.min'
   }
});

Murat Sutunc · Answer 4 · 2012-10-06 22:40

Во- первых получить ( требуется-JQuery ) от официального GitHub репо. После этого ваш каталог будет выглядеть следующим образом :

require-jquery.js
jquery.d.ts
main.ts
main.js
test.html

В настоящее время самый простой способ работы с модулями JQuery и AMD на машинописи, чтобы написать следующее на main.ts:

///<reference path="jquery.d.ts" />
declare var require;
require(["jquery"], function($:JQueryStatic) {
    $('body').append('<b>Hello JQuery AMD!</b>');
});

И назвать его из 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>

Надеюсь это поможет!

nxn · Answer 5 · 2012-11-01 01:37

Вы ссылки на внешние модули, путь и имя файла (без расширения .js), или просто по имени файла, если они являются глобальными. В вашем случае, вы должны сделать это внутри module.ts:

import jquery = module('./jquery-1.8.2');

Не забудьте компилировать с --module AMDтак как по умолчанию , вы получите код , который использует CommonJS requireфункцию.