Require js ruins code navigation

Question

require.js states the way of defining objects inside modules with define([requiremens], object) as best way.

So every page, or other js file, will do require() call and receive modules as parameters.

This works pretty fine, each function/module has own namespace.

The problem is that I have:

// AJAX/Requests.js

define(['UI/Message'],function(Message){
var Requests={
    checkResponse:function(response){
        //1==ok
        //0==error
        //2==good message
        //3==good message, but still stop
        if(response.status==1){
            return true;
        }
        else if(response.status==2){
            Message.good(response.message);
            return true;
        }
        else if(response.status==3){
            Message.good(response.message);
            return false;
        }
        else{
            Message.bad(response.message);
            return false;
        }
    }
};
return Requests;
});

Now the UI/Message is defined in the same way, and it returns object.

But when I edit file with requests, I can't navigate by code, so if I want to edit Message object, the only way is to go and open file the myself and to find function I need, rather than have the IDE jump there for me.

Is there some workaround for pycharm specifically or to require.js in common to solve this issue? When you have a lot of code it becomes a mess to navigate it, which is why I use an IDE in the first place!

And what worse: The editor never knows what functions objects have!

The one possible solution I can see is to not to use enclosed namespaces, and to declare global variable before the define() call, but in this case all objects shall be called like UI_Message, AJAX_Requests. In order to be sure, that I don't have some Message in two different locations....

And I am not sure, if require.js optimizer will use this correctly. Require.js documentation states very clear, to stay away from global variables.

Answer 1

It's a known issue, please star/vote.

From the issue description:

The dojo library switched to AMD's format define() for loading modules instead of dojo.require(). Previously I was able to use Ctrl+B on dojo.require('path.to.someJs') to jump to the declaration. This does not work on the new format define(['path/to/someJs]', ...).

As PyCharm, WebStorm, PhpStorm and IntelliJ IDEA share the same JavaScript plug-in, this issue also applies to the product that you are using. You will continue to observe the described problem until this bug is fixed. Sorry for the inconvenience.

Answer 2

WebStorm (at least 6.0.2) supports code navigation with RequireJs if you're defining your modules with the CommonJs wrapper and use the exports and module arguments:

//foo.js
define(function(require, exports, module) {
    //use exports to expose properties for code navigation in other modules
    exports.bar = function() {}
});

Apparently, it works even if the module using it doesn't use the CommonJs wrapper format:

define(['./foo'], function(foo) {
    foo.bar(); //code navigation works here
}

If the other IDEs use the same JavaScript plug-in as CrazyCoder said, it may work on their newer releases as well.