如何使用 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 块中，它是在已经需要之后设置的。 那么！到目前为止我已经用this作为解决方案：

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 配置，以便各种命名模块的导入路径是正确的。

（...这是因为，很大程度上，第 3 方依赖项是使用 Bower 解决的，并安装在 /lib/blah 中，而我定义的 shim 文件位于 src/deps/blah.d.ts 中，所以将生成的模块文件移动到站点上的 /js/ 后默认导入路径不正确）

注意。我在这里提到了 jquery，但问题是

not

jquery 不能作为 AMD 模块工作；我有一个垫片 jquery.ts.d 文件。这里的问题是 requirejs 路径。

昨天我在博客上写了这个问题的解决方案 -

http://edcourtenay.co.uk/musings-of-an-idiot/2014/11/26/typescript-requirejs-and-jquery

Answer 1

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

这篇文章已有 3 年历史，在使用 Typescript 时进行了很多更改。不管怎样，在网上搜索了一下，对 TS 文档做了一些研究——这些人做了一些很好的工作，我发现了一些可以帮助的东西。
所以这可以适用于最新的 TS (2.2.1)
你可能知道你可以使用

Answer 2

对您的第 3 方 JS 库执行相同的操作，例如 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的配置

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

所以这个答案看起来和埃德·考特尼的答案一样，不是吗？ 和用户210757提到它不起作用！ 但事实并非如此！如果您在控制台中输入

tsc -w --traceResolution

，您将看到 tsc 找不到 jquery 的任何定义。
以下是如何缓解假设您之前启动了 

npm install --save @types/jquery

通过执行此操作，在名为

node_modules\@types

的文件夹中，您应该获得 jquery

 的 TS 定义

选择jquery子文件夹中的package.json文件

• 寻找

  “main”
属性

• 将其设置为

  “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 代码对我来说看起来不错！
我只是不喜欢我们的模块依赖项列表

“require”

＆“exports”，这听起来像是 TS 问题，但无论如何它都有效！ 如果你想将

import

Answer 3

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

它应该也能工作