Как настроить конфигурацию require.js с помощью typescript?

Ответ 1

Вчера я написал решение этой точной проблемы в своем блоге - http://edcourtenay.co.uk/musings-of-an-idiot/2014/11/26/typescript-requirejs-and-jquery:

TL; DR - создать конфигурационный файл config.ts, который выглядит примерно так:

requirejs.config({
    paths: {
        "jquery": "Scripts/jquery-2.1.1"
    }
});

require(["app"]);

и убедитесь, что точка входа RequireJS указывает на новый файл конфигурации:

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

Теперь вы можете использовать пространство имен $ из ваших файлов TypeScript, просто используя

import $ = require("jquery")

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

Ответ 2

Это сообщение 3 года, и там много изменений, которые были сделаны при использовании Typescript. В любом случае, после некоторого поиска в Интернете, некоторые исследования по документации TS - эти ребята сделали хорошую работу, я нашел кое-что, что могло бы помочь. поэтому это может относиться к последнему течению TS (2.2.1) вы, вероятно, знаете, что вы можете использовать

npm install --save @types/jquery

сделайте то же самое для своих сторонних JS librairies, таких как require теперь вам нужно определить, что должен сделать ваш компилятор TypeScript, и как создать файл tsconfig.json, содержащий:

// tsconfig.json file
{
   "compilerOptions": {
   "allowJs": true,
   "baseUrl": "./Scripts",//Same as require.config
   "module": "amd",
   "moduleResolution": "Node",//to consider node_modules/@types folders
   "noImplicitAny": false,
   "target": "es5", // or whatever you want
   "watch": true
}

теперь, сосредоточьтесь на необходимости конфигурации

// require-config.ts
declare var require: any;
require.config({
   baseUrl: "./Scripts/",
   paths: {
      "jquery": "vendor/jquery/jquery.x.y.z"
      // add here all the paths your want
      // personnally, I just add all the 3rd party JS librairies I used
      // do not forget the shims with dependencies if needed...
   }
});

пока что так хорошо теперь сосредоточьтесь на своем модуле, написанном в TS, который будет использовать jquery и находится в папке Scripts/Module:

// module/blah.ts
/// <amd-module name="module/blah" />
import $ = require("jquery");
export function doSomething(){
    console.log("jQuery version :", $.version);
}

Итак, этот ответ выглядит так же, как Эд Куртен, не так ли? и user210757 отметил, что он НЕ работает!!! и это не так! если вы введете консоль tsc -w --traceResolution, you'll see that tsc cannot find any definition for jquery here how to alleviate assuming you previously launch npm install --save @types/jquery`, сделав это, в папке с именем node_modules\@types, вы должны получить определение TS для jquery

• выберите файл package.json в подпапке jquery
• найдите "основное свойство

• установите для параметра "jquery" то же самое, что и псевдоним, который вы используете в вашем require.config и сделано! ваш модуль будет транслироваться как

  define("module/blah", ["require", "exports", "jquery"], function (require, exports, $) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     function doSomething() {
       console.log("jQuery version:", $.fn.jQuery);
     }
     exports.doSomething = doSomething;
  });
  

и что JS-код выглядит хорошо для меня! Мне просто не нравится тот факт, что наш список зависимостей модулей "требует и " экспорта, что звучит как проблема с TS, но в любом случае IT WORKS!

Ответ 3

если вы хотите использовать import для модулей javascript, вам нужно сообщить об этом typescript,

declare var require;
require.config({
    paths: {
        "blah": '/libs/blah/blah',
    }
});

// Important, place in an external.d.ts: 
declare module 'blah'{
   // your opportunity to give typescript more information about this js file
   // for now just stick with "any"
   var mainobj:any;
   export = mainobj;
}

import b = require('blah');
console.log(b);

альтернативно вы можете просто сделать:

var b = require('blah');, и он также должен работать