All geek questions in one place

Using non-npm (legacy) javascript library with Jspm

I am trying to integrate this library which is not equal to npm. I have failed many times since I have always succeeded in using some modern frameworks, which makes integration impossible.

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 does not match the concept of the module. I had a lot of problems initializing this lib, a lot of shimming was done.

So the question is how can I use such libraries. Using at the same time modern methods of creating javascript applications.

+5
source share
2 answers

Looking at the code, I got it working (I used require.js , but you can use whatever you want):

 // 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>

(Here it will not be displayed in this fragment, since JavaScript should be placed in a file named main.js )

EDIT:

Adding a jspm / System.js snippet:
( main.js does not change)

 // 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>
+2
source

For older libraries that do not match modern module templates, the approach usually consists in fitting them.

  • If you use webpack , you can fake modules by declaring import and export .

  • RequireJS has a similar shim configuration , but more wiring is required to declare dependencies. I highly recommend webpack over Grunt / gulp / RequireJS.

However, looking at the mapy.cz library that you linked, it dynamically loads many other assets, I write script tags to the page. I see how difficult it is to work.

I think your options really are:

  • If the license is open source friendly, deploy it and put in a more modern module format that can be easily imported via npm. Check out the UMD style - you can write an ad that will export the module in a format that can be used by most modules (AMD, CommonJS, etc.).). the web page library and the external page contain some guidelines for writing modules in a format that others may use.

  • If this is not an open source license, you can contact the author (s) to ask them to change the way they merge and load the library. It should be easy to sell: the npm module will allow more people to use their code, and it would be easier to work with, especially if they started versioning it. You can offer to do it for them or just do it as an example that they can copy.

They have a page with detailed conditions, as well as a "contact us" button - I would start there: http://napoveda.seznam.cz/cz/mapy/mapy-licencni-podminky/licencni-podminky-mapovych-podkladu/

+3
source

Source: https://habr.com/ru/post/1244727/

More articles:


All Articles