你如何使用 typescript 设置 require.js 配置？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21179144/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do you setup a require.js config with typescript?
提问by Doug
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);
});
In typescript?
在打字稿中？
This doesn't work:
这不起作用：
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.
Compiling with the --module flag, with a dummy blah.ts shim compiles, but the output is:
使用 --module 标志编译，使用虚拟 blah.ts shim 进行编译，但输出为：
define(["require", "exports", 'blah'], function(require, exports, b) {
require.config({
paths: {
"blah": '/libs/blah/blah'
}
});
console.log(b);
});
Looks like it might work, but actually no, the require.config is insidethe require block, it is set afterit is already needed.
看起来它可以工作，但实际上不行，require.config在require 块内，它是在已经需要之后设置的。
SO! I've ended up so far with thisas 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);
});
Which seems terrible.
这看起来很可怕。
So be clear, inside modules that depend on each other, this sort of thing works perfectly fine:
所以要清楚，在相互依赖的模块内部，这种事情非常好：
import $ = require('jquery');
export module blah {
...
}
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.
我只需要一种在顶层设置 requirejs 配置的正确方法，以便各种命名模块的导入路径是正确的。
(...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)
（...这是因为，在很大程度上，第 3 方依赖项是使用 bower 解决的，并安装在 /lib/blah 中，因为我定义的 shim 文件位于 src/deps/blah.d.ts 中，因此将生成的模块文件移动到站点上的 /js/ 后，默认导入路径不正确）
NB. I've mentioned jquery here, but the problem is notthat 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.
注意。我在这里提到了 jquery，但问题不在于 jquery 不能作为 AMD 模块工作；我有一个 shim jquery.ts.d 文件。这里的问题是 requirejs 路径。
回答by Ed Courtenay
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:
昨天我在我的博客上写了这个确切问题的解决方案 - http://edcourtenay.co.uk/musings-of-an-idiot/2014/11/26/typescript-requirejs-and-jquery：
TL;DR - create a config file config.tsthat looks something like:
TL;DR - 创建一个config.ts类似于以下内容的配置文件：
requirejs.config({
paths: {
"jquery": "Scripts/jquery-2.1.1"
}
});
require(["app"]);
and ensure your RequireJS entry point points to the new config file:
并确保您的 RequireJS 入口点指向新的配置文件：
<script src="Scripts/require.js" data-main="config"></script>
You can now use the $namespace from within your TypeScript files by simply using
您现在可以$通过简单地使用 TypeScript 文件中的命名空间
import $ = require("jquery")
Hope this helps
希望这可以帮助
回答by zobidafly
This post is 3 years old, and there's a lot of changes that have been made when using Typescript. Anyway, after some search on the web,some research on TS documentation-these guys made some good job, I found something that could help. so this can apply to the latest current of TS (2.2.1) you probably know that you can use
这篇文章已经 3 年了，在使用 Typescript 时做了很多更改。无论如何，在网络上进行了一些搜索之后，对 TS 文档进行了一些研究——这些人做得很好，我找到了一些可以提供帮助的东西。所以这可以适用于最新的 TS (2.2.1) 你可能知道你可以使用
npm install --save @types/jquery
do the same for your 3rd party JS librairies such as require now you need to define what your TypeScript Compiler has to do, and how, so create a tsconfig.json file that contains:
对你的 3rd 方 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
}
now, let's focus on require's configuration
现在，让我们专注于 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...
}
});
so far so good now focus on your module written in TS that would use jquery and that is located in Scripts/Module folder:
到目前为止，现在专注于用 TS 编写的模块，这些模块将使用 jquery 并且位于 Scripts/Module 文件夹中：
// module/blah.ts
/// <amd-module name="module/blah" />
import $ = require("jquery");
export function doSomething(){
console.log("jQuery version :", $.version);
}
So this answer looks the same as Ed Courtenay's, doesn't it?
and user210757 mentioned that it does NOT work!!!
and it does not! if you type in your console tsc -w --traceResolution, you'll see that tsc cannot find any definition for jquery
here's how to alleviate assuming you previously launchnpm install --save @types/jquery` by doing this, in a folder named node_modules\@types , you should get the TS definition for jquery
所以这个答案看起来和 Ed Courtenay 的一样，不是吗？和 user210757 提到它不起作用！！！它没有！如果您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` 中键入，在名为 node_modules\@types 的文件夹中，您应该获得 jquery 的 TS 定义
- select the package.json file in jquery subfolder
- look for the "main"property
set it to "jquery", the same as the alias you are using in your require.config and done! your module would be transpiled as
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; });
- 选择 jquery 子文件夹中的 package.json 文件
- 寻找“主要”属性
将其设置为"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; });
and that JS code looks good to me!I just don't like the fact that our module dependencies list "require"& "exports", that sounds like a TS issue, but anyway IT WORKS!
那个 JS 代码对我来说很好看！我只是不喜欢我们的模块依赖项列表"require"& "exports"的事实，这听起来像是 TS 问题，但无论如何它有效！
回答by basarat
if you want to use importfor javascript modules you need to tell typescript about it so,
如果你想import用于 javascript 模块，你需要告诉打字稿，所以，
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);
alternatively you could simply do:
或者你可以简单地做：
var b = require('blah');and it should work as well
var b = require('blah');它也应该工作
