如何使用typescript设置require.js配置？

Question

好的,我一直在阅读很多关于此的问题和答案,其中很多都是垃圾.

我有一个非常简单的问题.我该怎么做相当于这个:

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

打字稿？

这不起作用:

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.

使用--module标志进行编译,使用虚拟blah.ts shim编译,但输出为:

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

    console.log(b);
});

看起来它可能有用,但实际上没有,require.config 在 require块内,它在已经需要之后设置.

所以!到目前为止,我已将此作为解决方案:

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

这看起来很可怕.

所以要清楚,在相互依赖的模块内部,这种事情完全正常:

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

我只需要一个正确的方法来将requirejs配置设置在顶层,这样各个命名模块的导入路径就是正确的.

(...这是因为,很大程度上,第三方依赖关系是使用bower解决的,并安装在/ lib/blah中,其中我的定义的shim文件位于src/deps/blah.d.ts,因此,将生成的模块文件移动到站点上的/ js /后,默认导入路径不正确)

NB.我在这里提到过jquery,但问题不在于jquery不能作为AMD模块使用属性; 我有一个shim jquery.ts.d文件.这里的问题是requirejs路径.

Answer 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")

希望这可以帮助

Answer 2

如果你想使用importjavascript 模块，你需要告诉 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');它应该也能工作