Używanie biblioteki javascript innej niż npm z Jspm

Próbuję zintegrować this library, który jest non-npm. Wiele razy zawiodłem, ponieważ zawsze korzystam z nowoczesnego systemu, który uniemożliwia mi integrację.Używanie biblioteki javascript innej niż npm z Jspm

Próbowałem backbone.js z require.js, nawet Dart, a teraz uparcie próbuję osiągnąć to samo używając gulp, jspm, aurelia. Problem polega na tym, że biblioteka ta prawdopodobnie nie jest zgodna z koncepcją modułu. Miałem wiele problemów z inicjalizacją tej biblioteki, wykonałem sporo shimmingu.

Pytanie więc, jak mogę korzystać z tego rodzaju bibliotek. Wykorzystując w tym samym czasie nowoczesne sposoby budowania aplikacji javascript.

Źródło

2016-03-09 Zveratko

Po patrząc na kod, dostałem go pracy (użyłem require.js, ale można użyć cokolwiek chcesz):

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

(To nie będzie działać we fragmencie h ere, ponieważ JavaScript powinny być umieszczone w pliku o nazwie main.js)

EDIT:

Dodawanie jspm/System.js snippet:
(main.js pozostaje niezmieniona)

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

Źródło

2016-04-04 23:06:52

Czy takie przycinanie można wykonać za pomocą jspm? – Zveratko

Jasne, jspm po prostu używa System.js do ładowania zasobów. Zaktualizowałem swoją odpowiedź, aby dodać fragment. –

Dla starszych bibliotek, które nie podążają za nowoczesnymi wzorami modułów, zwykle chodzi o to, aby je przesłonić.

Jeśli używasz WebPack można pasowana moduły deklarując imports and exports.
RequireJS ma podobny , ale potrzebuje więcej przewodów do zadeklarowania zależności. Zdecydowanie polecam Webpack na Grunt/gulp/RequireJS.

Jednak patrząc w bibliotece mapy.cz jesteś związany, dynamicznie ładuje wielu innych aktywów pisząc tagów skryptu na stronie. Widzę, jak ciężko z tym pracować.

myślę opcje są naprawdę:

Jeśli licencja jest przyjazny open source jeden, widelec i wystawiać je w bardziej nowoczesnej formie modułu, który może być łatwo importowane przez KMP. Sprawdź UMD style - możesz napisać deklarację, która wyeksportuje moduł w formacie używanym przez większość systemów modułowych (AMD, CommonJS itp.). Model webpack library and externals page ma pewne wskazówki dotyczące pisania modułów w formacie, z którego mogą korzystać inni użytkownicy.
Jeśli nie jest to licencja open source, możesz skontaktować się z autorem (autorami), aby poprosić ich o zmianę sposobu ładowania i ładowania biblioteki. Powinno to być łatwe do sprzedania: moduł npm pozwoliłby większej liczbie osób na korzystanie z ich kodu i byłby łatwiejszy w użyciu - szczególnie, gdyby zaczął on od versioning. Możesz zaproponować, aby zrobić to za nich, lub po prostu zrobić to jako przykład, z którego mogą kopiować.

Mają stronę szczegółowo warunki, a także jako „kontakt z nami” przycisk - zacznę tam: http://napoveda.seznam.cz/cz/mapy/mapy-licencni-podminky/licencni-podminky-mapovych-podkladu/

Źródło

2016-04-03 15:28:29

Problem z przeniesieniem do npm jest w moich słabych umiejętnościach javascript i czasie potrzebnym na taki port. Przekonanie właściciela jest wysoce niemożliwe. – Zveratko

Używanie biblioteki javascript innej niż npm z Jspm

Odpowiedz

Powiązane problemy