requirejs - tsconfig

¿Cómo se configura una configuración require.js con mecanografía?

Question

Ok, he estado leyendo muchas preguntas y respuestas sobre esto, y muchas de ellas son basura.

Tengo una pregunta muy simple. ¿Cómo hago el equivalente a esto?

require.config({
    paths: {
        "blah": ''/libs/blah/blah'',
    }
}); 
require([''blah''], function(b) {
    console.log(b); 
});

¿En mecanografiado?

Esto no funciona:

declare var require;
require.config({
    paths: {
        "blah": ''/libs/blah/blah'',
    }
});
import b = require(''blah'');
console.log(b);

s.ts(8,1): error TS2071: Unable to resolve external module ''''blah''''.
s.ts(8,1): error TS2072: Module cannot be aliased to a non-module type.
error TS5037: Cannot compile external modules unless the ''--module'' flag is provided.

Compilando con la bandera --module, con un compilado de blah.ts shim, la salida es:

define(["require", "exports", ''blah''], function(require, exports, b) {
    require.config({
        paths: {
            "blah": ''/libs/blah/blah''
        }
    });

    console.log(b);
});

Parece que podría funcionar, pero en realidad no, el require.config está dentro del bloque require, se configura cuando ya es necesario.

¡ASI QUE! He terminado hasta ahora con esto como una solución:

class RequireJS {

    private _r:any = window[''require''];

    public config(config:any):void {
        this._r[''config''](config);
    }

    public require(reqs:string[], callback:any):void {
        this._r(reqs, callback);
    }
}

var rjs = new RequireJS();
rjs.config({
    paths: {
        "jquery": ''/libs/jquery/jquery'',
        "slider": ''/js/blah/slider''
    }
});

rjs.require([''slider''], function(slider) {
    console.log(slider);
});

Lo que parece terrible.

Así que sea claro, dentro de los módulos que dependen unos de otros, este tipo de cosas funciona perfectamente bien:

import $ = require(''jquery'');
export module blah {
   ...
}

Solo necesito una forma adecuada de configurar la configuración de requirejs en un nivel superior, para que las rutas importadas para los distintos módulos nombrados sean correctas.

(... y esto se debe a que, en gran parte, las dependencias de terceros se resuelven utilizando bower, y se instalan en / lib / blah, donde los archivos shim que tengo para sus definiciones están en src / deps / blah.d.ts, por lo tanto, las rutas de importación predeterminadas son incorrectas después de mover los archivos de módulos generados a / js / en el sitio)

NÓTESE BIEN. He mencionado jquery aquí, pero el problema no es que jquery no funcione como un módulo AMD; Tengo un archivo shqu jquery.ts.d para esto. El problema aquí es las rutas de requirejs.

Answer 1

Ayer escribí una solución a este problema exacto en mi blog: http://edcourtenay.co.uk/musings-of-an-idiot/2014/11/26/typescript-requirejs-and-jquery :

TL; DR: crea un archivo de configuración config.ts que se parece a algo como:

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

require(["app"]);

y asegúrese de que sus puntos de entrada RequireJS apuntan al nuevo archivo de configuración:

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

Ahora puede usar el $ namespace desde sus archivos de TypeScript simplemente usando

import $ = require("jquery")

Espero que esto ayude

Answer 2

Esta publicación tiene 3 años de antigüedad y se han realizado muchos cambios al utilizar Typescript. De todos modos, después de algunas búsquedas en la web, algunas investigaciones sobre la documentación de TS, estos chicos hicieron un buen trabajo, encontré algo que podría ayudar. por lo que esto puede aplicarse a la última corriente de TS (2.2.1) que probablemente sepa que puede usar

npm install --save @types/jquery

haga lo mismo para sus bibliotecas JS de terceros, por ejemplo, ahora necesita definir qué tiene que hacer su Compilador de TypeScript y cómo, así que cree un archivo tsconfig.json que contenga:

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

Ahora, concentrémonos en la configuración de requerimientos.

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

hasta ahora todo bien, concéntrese en su módulo escrito en TS que usaría jquery y que se encuentra en la carpeta Scripts / Module:

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

Así que esta respuesta es la misma que la de Ed Courtenay, ¿no es así? y user210757 mencionaron que NO funciona !!! y no lo hace! Si escribe en su consola tsc -w --traceResolution, you''ll see that tsc cannot find any definition for jquery here''s how to alleviate assuming you previously launch indicamos tsc -w --traceResolution, you''ll see that tsc cannot find any definition for jquery here''s how to alleviate assuming you previously launch npm install --save @ types / jquery` haciendo esto en una carpeta. nombrado node_modules / @types, debería obtener la definición de TS para jquery

• seleccione el archivo package.json en la subcarpeta jquery
• buscar la propiedad "principal"

• configúrelo en "jquery" , igual que el alias que está utilizando en su require.config y listo! tu módulo sería transpilado como

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

y ese código JS me queda bien! Simplemente no me gusta el hecho de que nuestra lista de dependencias de módulos "requiera" y "exporte" , eso suena como un problema de TS, pero de todos modos, ¡FUNCIONA!

Answer 3

si desea utilizar la import para módulos de javascript, debe informarle a mecanografia al respecto,

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

alternativamente puedes simplemente hacer:

var b = require(''blah''); y debería funcionar tan bien