标签: requirejs

我试图使用r.js来优化我的代码,但我一直在运行这个错误:

跟踪以下内容的依赖关系:init

Error: Load timeout for modules: backbone,jquerymobile

我正在运行的命令是这样的:

$ java -classpath /Users/dixond/build-tools/rhino1_7R4/js.jar:/Users/dixond/build-tools/closurecompiler/compiler.jar org.mozilla.javascript.tools.shell.Main /Users/dixond/build-tools/r.js/dist/r.js -o /Users/dixond/Sites/omm_mobile/js/build.js

我的build.js文件如下所示:

( {
    //appDir: "some/path/",
    baseUrl : ".",
    mainConfigFile : 'init.js',
    paths : {
        jquery : 'libs/jquery-1.8.3.min',
        backbone : 'libs/backbone.0.9.9',
        underscore : 'libs/underscore-1.4.3',
        json2 : 'libs/json2',
        jquerymobile : 'libs/jquery.mobile-1.2.0.min'
    },
    packages : [],
    shim : {
        jquery : {
            exports : 'jQuery'
        },
        jquerymobile : {
            deps : ['jquery'],
            exports : 'jQuery.mobile'
        },
        underscore : {
            exports : '_'
        },
        backbone : { …

随着项目变得越来越大,我想从JavaScript切换到TypeScript以帮助进行代码管理.然而,我们使用许多库作为amd模块,我们不想将其转换为TypeScript.

我们仍然希望将它们导入TypeScript文件,但我们也不想生成定义文件.我们怎样才能做到这一点？

例如新的Typescript文件:

/// <reference path="../../../../definetelyTyped/jquery.d.ts" />
/// <reference path="../../../../definetelyTyped/require.d.ts" />
import $ = require('jquery');
import alert = require('lib/errorInfoHandler');

这lib/errorInfoHandler是一个amd模块,包含在我们不想触及的巨大JavaScript库中.

使用上面的代码会产生以下错误:

Unable to resolve external module ''lib/errorInfoHandler'' 
Module cannot be aliased to a non-module type.

这实际上应该产生以下代码:

define(["require", "exports", "jquery", "lib/errorInfoHandler"], function(require, exports, $, alert) {
...

}

有没有办法将JavaScript库作为amd模块导入TypeScript,并在TypeScript文件中使用它而不制作定义文件？

我还是ES6和模块加载器的新手,我目前正在考虑将浏览器设置与ES6相结合.我想知道如果我使用ES6模块,是否还需要browserify/requirejs.似乎都允许您定义模块并导出它们？browserify/requirejs模块和ES6模块有什么区别？

有没有办法定义一个"动态"加载RequireJS中其他模块的模块？如果是,优化器(r.js)如何理解如何/何时必须包含模块？

例如,让dynModules一个定义名称/路径对的模块:

define([], function () {
    return ['moduleA', 'moduleB']; // Array of module names
});

另一个模块将基于该阵列动态加载模块.这不起作用:

define(['dyn_modules'], function (dynModules) {
    for(name in dynModules) {   
        var module = require(path); // Call RequireJS require
    }

    // ...
});

... 给我:

未捕获错误:尚未为上下文加载模块名称"moduleA":_.使用require([]) http://requirejs.org/docs/errors.html#notloaded

我可以解决错误,但它不再是"动态的":

define(['dyn_modules', 'moduleA', 'moduleB'], function (dynModules) {
    for(name in dynModules) {   
        var module = require(path); // Call RequireJS require
    }

    // ...
});

对于模块,我不返回我一直使用的对象而不是define.例如,假设我有以下jQuery插件(jquery.my-plugin.js):

require(['jquery'], function($) {
    $.fn.myPlugin = function(options) {
        ...
    };
});

现在如果我在另一个模块中说出以下内容:

require(['jquery', 'jquery.my-plugin'], function($) {
    $('#element').myPlugin();
});

我发现这不起作用,因为myPlugin尚未注册.但是,如果我将require更改为我的jquery.my-plugin模块中的define,那么它可以正常工作.

如果有人能清楚我为什么要这样做,我会很感激.在继续使用它之前,我想完全理解一些东西.谢谢

假设我在主页面级别编写代码,并且2个依赖项需要对象的相同实例,并且还将其声明为依赖项.适当的方法是什么？

基本上我想要做的就是说,"如果没有加载这个依赖...然后加载它.否则,使用已加载的同一个实例,然后传递那个."

Backbone.js文档建议以这种方式加载bootstrapped模型:

<script>
var Accounts = new Backbone.Collection;
Accounts.reset(<%= @accounts.to_json %>);
var Projects = new Backbone.Collection;
Projects.reset(<%= @projects.to_json(:collaborators => true) %>);
</script>

但这是一种不能用于AMD方法的模式(使用require.js)

唯一可能的解决方案是声明存储JSON数据的全局变量,并在稍后的相关初始化方法中使用此变量.

有没有更好的方法来做到这一点(没有全局变量)？

我正在使用requireJS来加载脚本.它在文档中有这个细节:

用于模块名称的路径不应包含.js扩展名,因为路径映射可以用于目录.

在我的应用程序中,我将所有脚本文件映射到配置路径中,因为它们是在运行时动态生成的(我的脚本开始像生活一样,order.js但变成类似的东西order.min.b25a571965d02d9c54871b7636ca1c5e.js(这是文件内容的哈希,用于缓存目的) .

在某些情况下,require会在这些路径的末尾添加第二个.js扩展名.虽然我在服务器端生成动态路径然后填充配置路径,但我必须编写一些额外的javascript代码以.js从有问题的文件中删除扩展.

阅读requireJS文档,我真的不明白为什么你想要将路径映射用于目录.这是否意味着可以在一次调用中以某种方式加载整个目录的文件？我不明白.

有没有人知道是否可以强制要求停止将.js添加到文件路径,这样我就不必破解它了？

谢谢.

更新:根据请求添加了一些代码示例.

这是在我的HTML文件中(它是一个Scala项目,所以我们不能将这些变量直接写入.js文件):

foo.js.modules = {
    order               : '@Static("javascripts/order.min.js")',
    reqwest             : 'http://5.foo.appspot.com/js/libs/reqwest',
    bean                : 'http://4.foo.appspot.com/js/libs/bean.min',
    detect              : 'order!http://4.foo.appspot.com/js/detect/detect.js',
    images              : 'order!http://4.foo.appspot.com/js/detect/images.js',
    basicTemplate       : '@Static("javascripts/libs/basicTemplate.min.js")',
    trailExpander       : '@Static("javascripts/libs/trailExpander.min.js")',
    fetchDiscussion     : '@Static("javascripts/libs/fetchDiscussion.min.js")'
    mostPopular         : '@Static("javascripts/libs/mostPopular.min.js")'
};

然后在我的内心main.js:

requirejs.config({
    paths: foo.js.modules
});

require([foo.js.modules.detect, foo.js.modules.images, "bean"], 
    function(detect, images, bean) {
        // do stuff
});

在上面的例子中,我必须使用字符串"bean"(指的是require路径)而不是我的直接对象(就像其他人使用的那样foo.js.modules.bar),否则我会得到额外的.js附加.

希望这是有道理的.

我想保留一个json文档来存储一些简单的数据,我想要这个文档并在define()调用中使用json对象,所以我可以使用它.这不是一个"异步"调用.我的意思是它应该用于开发,但我确实希望在构建时编译文件,而不像API的实际异步调用,其中内容是动态的.

试图让业力与requirejs一起工作.我不明白为什么我在运行Karma时遇到所有这些错误:

ERROR: 'There is no timestamp for /base/test/mainSpec.js?bust=1387739317116!'
ERROR: 'There is no timestamp for /base/app/main.js?bust=1387739317116!'
ERROR: 'There is no timestamp for /base/bower_components/jquery/jquery.js?bust=1387739317116!'

当我在检查器中转到网络选项卡时,所有文件都没有404.

我有点困惑,因为业力似乎在寻找一个"基础"目录,但我的项目中没有"基础"目录.根据业力文档:

Karma提供/ base目录下的文件.因此,在服务器上将提供对文件的请求 http://localhost:9876/base/*.baseUrl的Require.js配置为使用相对路径加载的模块提供了起始上下文.为Karma服务器设置此值时,需要以/ base开头.我们希望测试的baseUrl与src/main.js中的基本URL相同,因此源中的相对需求不需要更改.所以,因为我们希望我们的基本URL位于src /,我们需要写/ base/src.

这至少令人困惑.我应该在main.js文件中有一个指向'/ base'的baseUrl配置吗？