标签: js-amd

我有我的主要初始化脚本调用require(),其中一个依赖项是一个实用程序框架,但我通过require()指定的其他一些模块本身也将此框架定义为依赖项.

例如(init.js):

require(['module-a', 'module-b', 'module-c'], function(a, b, c){
    // where module-c is the framework
});

然后在'module-a'中我有:

define(['module-c'], function(c){
    // utilize module-c framework
});

那么AMD/RequireJs如何处理这种情况,它是否加载了两次相同的框架？

任何帮助赞赏.

亲切的问候,马克

我目前有一个使用require.js的AMD Backbone模型,如下所示:

// models/game.js
define(['backbone'],
function(Backbone) {

  var Game = Backbone.Model.extend({
    urlRoot  : '/games/'
  , defaults : {
      name : null
    }
  });

  return Game;
});

AMD/Backbone组织来自本教程和jrburke的Backbone请求.

我也想在Node.js中使用Backbone模型,因为在不使用AMD时,共享Backbone模型和集合在过去运行良好,而且,显然我是一个受虐狂.

所以我尝试了以下(受Backbone mod的启发):

// models/game.js
(function(root, factory) {
  if (typeof exports !== 'undefined') {
    factory(root, exports, require('backbone'));
  }
  else if (typeof define === 'function' && define.amd) {
    define(['backbone'], function(Backbone, exports) {
      factory(root, exports, Backbone);
    });
  }
}(this, function(root, Game, Backbone) {

  Game = Backbone.Model.extend({
    urlRoot  : '/games/'
  , …

我正在开发一个用于JSON/XML处理的JavaScript库.我的库在浏览器以及Node.js(带xmldom和xmlhttprequest模块)中工作.

其中一位用户最近要求提供RequireJS支持.我已经看了一下RequireJS/AMD的东西,认为这是一个很好的方法,所以我想提供这个.

但是我想保留可移植性:我的库必须在浏览器(有和没有RequireJS)以及Node.js中工作.在浏览器环境中,我不依赖xmldom或xmlhttprequest因为这些东西是由浏览器本身提供的.

我的问题是:我如何实现我的库,以便它在浏览器以及没有RequireJS的Node.js中工作？

一点历史和我目前的解决方案

我最初为浏览器编写了我的库.所以它只是创建了一个全局范围的对象并将所有内容放入其中:

var Jsonix = { ... };

后来用户要求Node.js支持.所以我补充说:

if(typeof require === 'function'){
    module.exports.Jsonix = Jsonix;
}

我还必须导入上面提到的几个模块.我有条件地做了,取决于require功能是否可用:

if (typeof require === 'function')
{
    var XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest;
    return new XMLHttpRequest();
}

现在有了RequireJS这个故事.如果存在RequireJS,则该require函数也存在.但模块加载的工作方式不同,我必须使用define函数等.我也不能只是require因为require在RequireJS中有一个异步API.此外,如果我的库是通过RequireJS加载的,它似乎处理源代码并检测require('something')即使我有条件地执行它

if (typeof require === 'function' && typeof require.specified !== 'function) ...

RequireJS仍然检测到require('xmlhttprequest')尝试加载相应的JS文件.

目前我正在寻求以下解决方案.

// Module factory function, AMD style …

在javascript上下文中查看异步模块定义(AMD)后,我想知道如何在Visual Studio 2010中为依赖模块获取intellisense.

例如给定模块A:

define(function() {
    return {
        square: function(value) {
            return value * value;
        }
    };
});

和相应的模块B:

define(["A"], function(a) {
    return {
        value: a.square(10)
    }
});

然后我希望模块B中的模块A(表示为参数a)具有完整的智能感知.请注意,这两个模块都将在单独的文件中定义(在这种情况下为A.js和B.js).

简短而看似愚蠢的问题,因为这么简单,你会想到无处不在:有没有人在RequireJS前端项目(非NodeJS)中使用任何类型的代码覆盖？

这似乎是一个愚蠢的问题,因为JS世界中TDD方法的普及以及AMD开发的接管.

我已经尝试了一百万种方法,但都缺乏.我的项目是一个带有Jasmine单元测试的Backbone项目:

1)带有Coverage插件的JSTD.JSTD无法正确加载和检测AMD模块.如果我在单个js文件上运行JSTD(由RequireJS优化器组合),那么代码覆盖率可以很好地工作,除了收集覆盖范围并在ENTIRE文件上定义度量标准.太棒了,这没用,因为它包括第三方库,因为我无法针对单个单元来帮助测试开发.哎呀.

2)JSCoverage - 总失败,不喜欢AMD模块.

3)特定于Chrome和Firebug的"现场"指导员 - 失败,不喜欢AMD模块.

我尝试的每一种方法似乎都需要大量的定制工作.那么也许我需要从头开始自定义解决方案？

如何使用以下方法:将RequireJS优化器扩展为仪器代码并创建覆盖范围.它将是内存中的检测,可以使用require.config({instrument:true})标志启用.每次需要加载模块时,它会自动对其进行检测并将其放置在模块库中.覆盖率统计信息收集在全局require对象下的对象中,并且可以从任何地方访问,例如,在Jasmine测试运行之后.

输入？

有没有人使用过类似require.js的Googlemaps V3,它需要在AMD版本中？有没有人在某处做过？

如果我使用/// <reference path="..."/>语法引用TypeScript声明文件(例如jquery.d.ts),我应该确保通过其他方式加载相应的库,即只引用.d.ts文件不加载图书馆.

require()当我使用它时,有没有办法让TypeScript生成对库的调用？如果我没有使用AMD/requirejs,我可以require手动调用,但我想让它与AMD合作.

这样做的好处是我的依赖关系不会在两个地方定义.从.ts文件引用库就足以确保它加载,而不必在我的HTML中手动维护依赖项列表.

更新:我开了一个新问题,澄清了我的确切情况.因为我没有提供所有必要的细节,所以我想对我原来问题的答案给予赞扬.

在我的grunt.js文件中,我有

requirejs: {
    dist: {
        options: {
            almond: true,
            wrap: true,
            modules: [{name: 'main'}],
            mainConfigFile: "src/js/main.js",
            baseUrl: "src/js",
            dir: "tmp/js",
            inlineText: true,
            preserveLicenseComments: false
        }
    }
}

运行使用一些缩小的文件grunt requirejs:dist填充tmp/js目录 - 其中包括一个大的main.js文件(所有内容似乎都按预期捆绑在此文件中) - 但是当我想要包含此文件时

<script type="text/javascript" src="tmp/main.js"></script>

它导致了 "Uncaught ReferenceError: define is not defined"

使用杏仁的意图是我不需要加载require.js文件来加载我的opimized文件 - 任何想法如何让它工作？

脚注:我已经设法这样做,除了之前main-built.js已经编译了一个文件,但是这似乎不再是这种情况了(更新... -.-)

我在互联网上看了很多例子如何用requireJS开始开发BB应用程序,但我有点迷失.

我认为AMD的目标是只在真正需要时加载文件.不久

为什么我只看到开发人员将几乎所有文件作为依赖项放在他/她的主文件开头的示例？

这是一个例子:https: //github.com/jcreamer898/RequireJS-Backbone-Starter/tree/master/js

这个应用程序立即加载main.js,这取决于app.js加载router/home.js,这需要view/view.js加载视图的模板和models/model.js ......和结束.

我无法看到如何扩展此应用程序,例如更多视图,其中视图的依赖项(其模型,模板,集合,第三方API等)仅在路由器调用和初始化时加载.换句话说,在初始化应用程序时加载所有文件时使用AMD是无稽之谈.

类似的例子:http: //backbonetutorials.com/organizing-backbone-using-modules/请参阅router.js文件.实际上它加载'views/projects/list'和'views/users/list'依赖关系,而路由器没有知道用户将来是否需要它们.

请提前,谢谢!

我开始在虚拟项目中使用require js.我现在想使用r.js脚本来构建我的生产项目.

上下文是这样的:

• 名为start.js的主文件是:

  require([/* some stuff */], function (){ /* app logic */ });
  

  Run Code Online (Sandbox Code Playgroud)

  哪个有if,根据某些条件决定我应该要求什么.

• 所需文件是ModuleA或ModuleB

• ModuleA和ModuleB都有依赖关系.

  define([/*some deps*/], function(dep1, dep2...) { 
      /* app logic */ 
      return { /* interface */
  }
  

  Run Code Online (Sandbox Code Playgroud)

• 在优化和模块连接之前,一切都在开发模式下正常工作.

• 使用r.js构建时,我将以下内容指定为模块目标:modules:[{name:"start"},{name:"ModuleA"},{name:"ModuleB"}]

问题是我的ModuleA变成了:

 define(dep1 ..);
 define(dep2 ..);
 define(ModuleA ..);

但是没有从ModuleA加载.开发中的ModeulA代码加载并执行,构建加载后的代码但不运行.

我怎么能解决这个问题？

UPDATE

http://pastebin.com/p1xUcY0A - > start.js

http://pastebin.com/dXa6PtpX - > ModuleA js-animation.js

http://pastebin.com/xcCvhLrT - > ModuleB css-animation.js没有deps.

http://pastebin.com/j51V5kMt - >运行优化程序时使用的r.js配置文件.

http://pastebin.com/UVkWjwe9 - >运行r.js后js-animation.js的样子.这是有问题的文件.我没有从这个文件中获取js-animation模块.require不会返回我的js-animation对象.

编辑:

删除模块定义末尾的.js后,从start js开始,优化的start.js是http://pastebin.com/LfaLkJaT,js-animations模块是http://pastebin.com/qwnpkCC6.在chrome中,我在我的控制台http://pastebin.com/Hq7HGcmm中收到此错误