你如何使用 typescript 设置 require.js 配置? [英] How do you setup a require.js config with typescript?

问题描述

好的，我已经阅读了很多关于此的问题和答案，其中很多都是垃圾.

Ok, I've been reading a lot of questions and answers about this, and a lot of it is rubbish.

我有一个非常简单的问题.我该怎么做呢:

I have a very simple question. How do I do the equivalent of this:

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 进行编译，但输出为:

Compiling with the --module flag, with a dummy blah.ts shim compiles, but the output is:

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

    console.log(b);
});

看起来可能可行，但实际上不行，require.config 在 require 块中，它是在之后设置的.

Looks like it might work, but actually no, the require.config is inside the require block, it is set after it is already needed.

所以！到目前为止，我已经将这个作为解决方案:

SO! I've ended up so far with this as a solution:

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

这看起来很糟糕.

所以要清楚，在相互依赖的模块内部，这种事情非常好:

So be clear, inside modules that depend on each other, this sort of thing works perfectly fine:

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

我只需要一个正确的方法来在顶层设置 requirejs 配置，以便各种命名模块的导入路径是正确的.

I just need a proper way to setting the requirejs config at a top level, so that the imported paths for the various named modules are correct.

(...这是因为，在很大程度上，3rd 方依赖项是使用 bower 解决的，并安装在/lib/blah 中，而我为它们定义的 shim 文件位于 src/deps/blah.d.ts，所以把生成的模块文件移动到站点上的/js/后，默认导入路径是错误的)

(...and this is because, largely, 3rd party dependencies are resolved using bower, and installed in the /lib/blah, where as the shim files I have for their definitions are in src/deps/blah.d.ts, so the default import paths are incorrect after moving the generated modules files into /js/ on the site)

注意.我在这里提到了 jquery，但问题是不是 jquery 不能作为 AMD 模块工作；我有一个 shim jquery.ts.d 文件.这里的问题是 requirejs 路径.

NB. I've mentioned jquery here, but the problem is not that jquery doesn't work property as an AMD module; I have a shim jquery.ts.d file for this. The issue here is the requirejs paths.

推荐答案

昨天我在我的博客上写了一个针对这个确切问题的解决方案 - http://edcourtenay.co.uk/musings-of-an-idiot/2014/11/26/typescript-requirejs-and-jquery:

Yesterday I wrote up a solution to this exact issue on my blog - http://edcourtenay.co.uk/musings-of-an-idiot/2014/11/26/typescript-requirejs-and-jquery:

TL;DR - 创建一个配置文件 config.ts 类似于:

TL;DR - create a config file config.ts that looks something like:

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

require(["app"]);

并确保您的 RequireJS 入口点指向新的配置文件:

and ensure your RequireJS entry point points to the new config file:

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

您现在可以在 TypeScript 文件中使用 $ 命名空间，只需使用

You can now use the $ namespace from within your TypeScript files by simply using

import $ = require("jquery")

希望能帮到你

这篇关于你如何使用 typescript 设置 require.js 配置?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！