标签: js-amd

在我的项目中，有一个自定义的第三方库（单个构建文件），他们使用几个非 AMD 和 AMD 文件创建了该库。并且大部分属性都直接暴露给 window 对象。在我们的项目中，根据新的要求，我们必须使用 requireJS 以异步模式加载这个第三方库。我尝试了 shim 配置，但从第三方库收到一个错误，说需要 globals/window、globals/documents。

1. 不编辑第三方库，如何解决当前项目中的上述错误？是否可以？
2. 如何在项目中使用这个第三方库属性，因为所有属性都直接暴露给 window 对象。

这是我们现在遇到的错误

任何人都可以帮我解决这个问题吗？提前致谢！

我正在使用AMD和RequireJS将项目从Dojo 1.6.1升级到带有新AMD加载器的Dojo 1.7.1.我必须处理旧的JavaScript文件,而不是作为AMD模块编写,并且必须以正确的顺序加载它们.

在我使用RequireJS订单插件之前,它似乎不适用于Dojo AMD Loader.我在loader文档或Dojo Build System文档中找不到任何相关内容.

有什么想法吗？如果没有订单插件,我应该如何与Dojo 1.7一起处理纯JavaScript文件？我是否需要单独处理它们,或者在加载器或构建系统中是否有这方面的功能？

我开始尝试围绕requirejs和新的Dojo AMD结构,但我有一些早期测试的问题:

CG/signup.js:

define(['dojo/_base/fx', 'dojo/dom'], function(fx, dom){    
    return function(){
        this.hidePreloader = function(id){
            var preloader = dom.byId(id);
            fx.fadeOut({node : preloader}).play()
        }
    }
})

这很好用.在master cg.js文件中:

require(['dojo/_base/kernel', 'dojo/_base/loader'])
dojo.registerModulePath('cg', '../cg')

require(['cg/signup', 'dojo/domReady!'], function(Signup){
        var sp = new Signup();
        sp.hidePreloader('preloader')
})

巴姆.完成.但是,在使用Simplified CommonJS Wrapper结构时:

define(function(require){    
    var fx = require('dojo/_base/fx'),
        dom = require('dojo/dom');

    return function(){
        this.hidePreloader = function(id){
            var preloader = dom.byId(id);
            fx.fadeOut({node : preloader}).play()
        }
    }
})

我收到一个undefinedModule错误.它似乎来自这dojo/_base/fx条线,但我不知道为什么.

UPDATE

为了澄清.

index.html脚本

<script type="text/javascript" src="js/dojo/dojo.js.uncompressed.js" data-dojo-config="isDebug:true,async:true"></script>
<script type="text/javascript" src="js/cg.js"></script>

cg.js

require(['dojo/_base/kernel', 'dojo/_base/loader']) …

使用Requirejs,如果条件为真,我怎样才能加载模块？例如,如果用户是Admin,则加载文件a.js.

PS:我正在使用Backbone和Requirejs.

我们正在创建一个我们打算在多个项目中使用的框架.所有项目都将使用require.js来管理模块和依赖项.

理想情况下,我想使用r.js优化器将框架编译为单个文件,该文件可以提供给使用它的应用程序.该文件将包含框架的所有模块,以便在我的应用程序中我可以编写如下代码:

define(["framework/util/a", "framework/views/b"], function(A, B) {
  var a = new A();
  // etc...
});

但似乎这种方法存在两个问题.

1. 取决于framework/util/a不告诉require.js它需要加载framework.js它将找到它util/a
2. 优化工具为包含的所有模块生成名称,framework.js例如,define("util/a", function() { ... } ); 即使加载了require.js framework.js,也没有任何内容告诉它定义的模块util/a是相对模块,framework因此被标识为framework/util/a

我是否遗漏了一些东西,或者是一种更好的方法来构建我的框架作为CommonJS包并使用require.js的packages配置选项？

我有一个基于RequireJS的单页Marionette应用程序需要支持翻译.

我的目标是为每种语言创建一个字典文件,并根据登录用户的配置加载相关文件.

由于大多数用户将使用英语,我想在构建期间在应用程序中捆绑英语词典(使用r.js).

我写了一个小的Translator模块,它基本上包装了jed.js(我用于i18n的库):

//in myTranslator.js
define(function (require) {
    "use strict";

    var Jed = require("jed");
    var localeData = require("json!locales/en_US.json");

    var Translator = function () {
        var i18n = new Jed({
            "domain": "messages",
            "locale_data": localeData
        });
        return i18n;
    };
    return Translator;
});

//in app.js
define(function(require){
    var Translator = require("myTranslator");
    var translator = new Translator();
});

如您所见,语言环境数据是从静态文件加载的.我希望能够将语言环境传递给Translator构造函数,并在此基础上加载正确的JSON文件.

如何将英语JSON与建成项目捆绑在一起？

我在我的Javascript应用程序中使用Module Pattern,我想迁移到RequireJS和AMD.

我目前的实现是这样的:

// Module main : Module.js
var myModule = (function(my, $, undefined) {
    'use strict';

    var m_privateMembers;
    var m_stuff = new my.Pear({color:"green"});

    //---------------------------------------

    function privateFunctions(args) {
    }

    //-----------------------------------

    my.publicFunctions = function(args) {
    };

    return my;
})(myModule || {}, jQuery);



// Module class Fruit : Module.Fruit.js
var myModule = (function(my, $, undefined) {
    'use strict';

    my.Fruit = Object.makeSubclass();

    my.Fruit.prototype._init = function() {

    };

    my.Fruit.prototype.someClassFunction = function() {
    };

    return my;
})(myModule || {}, jQuery);


// Module class Pear : …

我有一个AngularJS应用程序,将来,其他团队的一些开发人员将开发将作为其一部分安装的模块.所以我定义了文件夹结构如下.

www/
  index.html
  app.js
  modules/
    modulesA/ -- will be copied when module A was installed
      moduleA.js
      moduleA.css
      moduleA.partial.html
    modulesB/ -- will be copied when module B was installed
      moduleB.js
      moduleB.css
      moduleB.partial.html

现在我有一个问题.当用户安装模块A时,如何让AngularJS(和应用程序)在其文件夹下加载JS和CSS？是否有任何库可以按文件夹加载JS和CSS,以便我可以将代码放入index.html喜欢 <script src="/modules/**/*.js"></script> <link src="/modules/**/*.css"/>

否则,我必须添加一些placesholders index.html并在用户安装模块时更改内容,例如 <script src="/app.js"></script> <!-- $$_JS_$$ --> <link src="/app.css"/> <!-- $$_CSS_$$ -->

具体想象一下这个场景：我有一个 jquery 插件 $.mega()。

我可以为这个插件创建一个定义文件，如下所示：

/// <reference path="../jquery/jquery.d.ts"/>

// Extend jquery with .mega()
interface JQuery { mega(options?:any):void; }

// Declare an external module, to import mega using AMD.
// NB. You still need to setup require.js to find the bower module.
declare module mega { export function dummy():void; }
declare module "mega" { export = mega; }

然后我可以使用以下脚本从脚本调用插件：

/// <reference path="../../defs/jquery/jquery.d.ts"/>
/// <reference path="../../defs/mega/mega.d.ts"/>
import mega = require('mega');
import $ = require('jquery');

((...r:any[]) => {})(mega);  // <---- WTF!

$('.target').mega();

由于打字稿会自动修剪和 …

我正在尝试网络工作者让我的计算量很大的Javascript真正并行.但是,我有一个问题,我的所有javascript文件都是AMD模块.我可以在网络工作者中使用requirejs吗？怎么样？