Search code examples
javascriptnode.jsbackbone.jsaureliajspm

Using non-npm(legacy) javascript library with Jspm

I'm trying to integrate this library which is non-npm. I failed many times already as I always thrive for using some modern framework which makes it impossible for me to integrate.

I tried backbone.js with require.js, even Dart and now I'm stubbornly trying to achieve the same using gulp, jspm, aurelia. The problem is that this library probably doesn't follow the module concept. I had lot of problems with initialization of this lib, made a lot of shimming.

So the question is how can I use such kind of libraries. Using in the same time modern ways to build javascript applications.

Solution

  • After looking at the code, I got it working (I used require.js, but you can use whatever you like):

    // main.js
////////////////
require(['mapy-loader'], function (Loader) {
    // load mapy async and wait for it to finish
    Loader.async = true;
    Loader.load(null, null, function () {
        var stred = SMap.Coords.fromWGS84(14.41, 50.08);
        var mapa = new SMap(JAK.gel("mapa"), stred, 10);
        mapa.addDefaultLayer(SMap.DEF_BASE).enable();
        mapa.addDefaultControls();
    });
});
    <!doctype html>
<html>
<head>
    <script data-main="main.js" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.2.0/require.min.js"></script>
    <script>
        requirejs.config({
            paths: {
                "mapy-loader": "//api.mapy.cz/loader"
            },
            shim: {
                'mapy-loader': {exports: 'Loader'}
            }
        });
    </script>
</head>

<body>
<div id="mapa" style="width:600px; height:400px;"></div>
</body>
</html>

    (It won't run in the snippet here, since the JavaScript should be placed in a file named main.js)

    EDIT:

    Adding jspm / System.js snippet:
    (main.js is unchanged)

    // main.js
////////////////
define(['mapy-loader'], function (Loader) {
    // load it async and wait for it to finish!
    Loader.async = true;
    Loader.load(null, null, function () {
        var stred = SMap.Coords.fromWGS84(14.41, 50.08);
        var mapa = new SMap(JAK.gel("mapa"), stred, 10);
        mapa.addDefaultLayer(SMap.DEF_BASE).enable();
        mapa.addDefaultControls();
    });
});
    <!doctype html>
<html>
<head>
    <script src="jspm_packages/system.js"></script>
    <script>
        System.config({
            baseURL: "/",
            defaultJSExtensions: true,
            transpiler: "babel",
            paths: {
                "mapy-loader": "//api.mapy.cz/loader"
            },
            meta: {
                'mapy-loader': {
                    format: 'global',
                    exports: 'Loader'
                }
            }
        });
    </script>
    <script>
        System.import('main.js');
    </script>
    Run
</head>

<body>
<div id="mapa" style="width:600px; height:400px;"></div>
</body>
</html>