AMD/Require.js example

[jcorry]

Does anyone have an example of how I can use the Gmap extension with Wicket importing them both with require.js?

I've tried several approaches with shims with deps and exports and can't get passed:

ReferenceError: Wkt is not defined

Has anyone done this?

[daamsie]

@jcorry I had a lot of trouble with the version in npm which is out of date (1.1). My package.json now has this as a dependency:

"wicket": "arthur-e/Wicket" (this fetches it from the master branch on github instead of npm repo)

and then required like this because there is no index.js

var Wkt = require('wicket/wicket');

[ffflabs]

define(['wicket', 'wicket_gmaps'], function(Wkt) {
...
});

You need to set that wicked_gmaps depends on wicket in your config.

[trungvose]

Hi guys,

I have brought this question to StackOverflow and got an excellent answer. Please check @Louis's answer in the following link.

http://stackoverflow.com/questions/41254745/requirejs-load-wicket-library

This is the summary.

The wicket.js file has a call to define. So setting a shim for it is useless, because shim is meaningful only for non-AMD "modules" (i.e. files that are not really modules but which we want to behave as if they were). AMD modules call define.

On the other hand wicket-gmap3.js is not an AMD-module. So you do need the shim for it. However, it depends on Wkt being present in the global space. The logic in wicket.js is such that when it calls define it does not set Wkt in the global space. (Which is the correct behavior for well-behaved AMD modules.) You need to perform the leakage yourself.

Change your config to:

define("wicket-glue", ["wicket"], function (wicket) {
    Wkt = wicket; // Deliberately leak into the global space.
    return wicket;
});

require.config({    
    waitSeconds: 200,
    paths: {
        'wicket': '/Vendor/Wicket/wicket',
        'wicketGmap3': '/Vendor/Wicket/wicket-gmap3'
    },
    map: {
        '*': {
            wicket: 'wicket-glue',
        },
        'wicket-glue': {
            wicket: 'wicket'
        }
    }
    shim: {
        wicketGmap3: {            
            deps: ['wicket']
        }          
    },
});

I've added a new module named wicket-glue. I often place such modules together with the configuration so that they don't require an additional data fetch. You could just as well put it in a separate file if you want. (If I did that, I'd remove the first argument to define though and name the file wicket-glue.js so that RequireJS takes the module name from the file name.)

I've also added a map which essentially says "in all modules, when the module wicket is required, load wicket-glue instead, but in wicket-glue when the wicket is required, load wicket".

The net effect is that whenever wicket is required, Wkt will be leaked to the global space and wicket-glue should work fine.

Then when you want to use wicketGmap3, just refer it in your require statement.

require(['wicketGmap3'],() => {
  //TODO
});

@arthur-e You can also update it to readme.md :D