Geek Answers Handbook

Why doesn't the Simplified CommonJS Wrapper syntax work on my AMD Dojo module?

Im starting to sort my head around requirejs and the new AMD Dojo framework, but I have a problem with some early tests:

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()
        }
    }
})

It works great. In the master cg.js file:

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

Bam. Done. However, when using the simplified CommonJS Wrapper structure:

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()
        }
    }
})

I get an undefinedModule error. It seems to come from a line dojo/_base/fx, but I don't know why.

UPDATE

For clarification.

index.html scripts

<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'])
dojo.registerModulePath('cg', '../cg')

require(['cg/signup', 'dojo/domReady!'], function(signup){
    signup.testFunc()
})

Js / cg / signup.js

define(['require', 'exports'], function(require, exports){
    var dom = require('dojo/_base/kernel');
// Any other require() declarations (with very very few exceptions like 'dojo/_base/array throw undefinedModule errors!!!

    // without any error causing requires, this works fine.
    exports.testFunc = function(){
        alert("hello")
    }
})
+5
source share
5 answers

dojo fully supports the simplified version of CommonJS Wrapper. however, there is a precondition ... you should not have an array of dependencies.

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

    // continue...
});

it will NOT work the same

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

    // continue...
});

and will not ...

// in this case require, exports and module will not even exist
define([], function (require, exports, module) {
        var fx = require('dojo/_base/fx'),
        dom = require('dojo/dom');

    // continue...
});
+3

Dojo define, , RequireJS, toString . "" , .

defineWrapper.js:

// Workaround for the fact that Dojo AMD does not support the Simplified CommonJS Wrapper module definition
(function() {
    var commentRegExp = /(\/\*([\s\S]*?)\*\/|([^:]|^)\/\/(.*)$)/mg,
      cjsRequireRegExp = /require\(\s*["']([^'"\s]+)["']\s*\)/g,
      ostring = Object.prototype.toString;
    function isArray(it) {
      return ostring.call(it) === '[object Array]';
    }
    function isFunction(it) {
      return ostring.call(it) === '[object Function]';
    }
    var oldDefine = define;

    define = function(name, deps, callback) {
        //Allow for anonymous functions
        if (typeof name !== 'string') {
          //Adjust args appropriately
          callback = deps;
          deps = name;
          name = null;
        }

        //This module may not have dependencies
        if (!isArray(deps)) {
          callback = deps;
          deps = [];
        }

        //If no name, and callback is a function, then figure out if it a
        //CommonJS thing with dependencies.
        if (!deps.length && isFunction(callback)) {
          //Remove comments from the callback string,
          //look for require calls, and pull them into the dependencies,
          //but only if there are function args.
          if (callback.length) {
              callback
                  .toString()
                  .replace(commentRegExp, '')
                  .replace(cjsRequireRegExp, function(match, dep) {
                      deps.push(dep);
                  });

              //May be a CommonJS thing even without require calls, but still
              //could use exports, and module. Avoid doing exports and module
              //work though if it just needs require.
              //REQUIRES the function to expect the CommonJS variables in the
              //order listed below.
              deps = (callback.length === 1 ? ['require'] :
                  ['require', 'exports', 'module']).concat(deps);
          }
        }

        if(name === null) {
            return oldDefine(deps, callback);
        } else {
            return oldDefine(name, deps, callback);
        }
    }
})();

?

<script src="...dojo..."></script>
<script src="defineWrapper.js"></script>
<script>require(["some_simplified_commonjs_defined_module"], function(module) {
   // use module here
});</script>
+2

, Dojo CommonJS . , , .

:

http://bugs.dojotoolkit.org/ticket/15350

+2

require? , . , , , -

define(["require"], function(require){ ...
+1

I began to think that maybe I was not going to study Dojo. But all this comes with a little reading. I'm not quite sure what I did differently or something else, but here's a working layout.

index.html scripts and config

<script type="text/javascript">
dojoConfig = {
    async : true,
    isDebug : true,
    debugAtAllCosts : true,
    packages : [{
        name : 'cg',
        location : '/../js/cg'
    }]
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js"></script>
<script type="text/javascript" src="js/cg.js"></script>

Js / cg.js

require(['cg/signup', 'dojo/ready'], function(signup){
    signup.init('preloader')
})

Js / cg / signup.js

define(['dojo', 'require'], function(dojo, require){
    var fx = require('dojo/_base/fx')

    return new function(){    
        this.init = function(id){
            fx.fadeOut({node : dojo.byId(id)}).play()
        }
    }
})

Again, it’s not entirely clear why the operator var fx = require(...)works differently in this than others, maybe the assembly I downloaded and the CDN who cares. It works. Some links that I used to help others, perhaps in the same boat:

Writing Modular JS

AMD vs CommonJS Wrapper

Dojo AMD Toolkit

Dojo Config (1.7)

+1
source

More articles:


All Articles