在Jspm中使用非npm(legacy)javascript库

我正在尝试整合这个非npm的库 。 我已经失败了很多次,因为我总是很兴奋地使用一些现代化的框架,这使得我无法整合。

我用require.js尝试了backbone.js,甚至Dart,现在我仍然固执地尝试使用gulp,jspm,aurelia来达到同样的效果。 问题是这个库可能不遵循模块的概念。 我对这个库的初始化有很多问题,做了很多补偿。

所以问题是我该如何使用这样的库。 在同一时间使用现代的方式来构buildJavaScript应用程序。

看了代码,我得到了它的工作(我使用require.js ,但你可以使用任何你喜欢的):

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

对于不遵循现代模块模式的较旧的库,通常是将它们填充。

  • 如果您使用的是webpack ,则可以通过声明导入和导出来填充模块。

  • RequireJS有一个类似的shimconfiguration ,但是需要更多的接线来声明依赖关系。 我强烈build议在Grunt / gulp / RequireJS上使用webpack。

但是,查看您链接的mapy.cz库,它会通过将脚本标记写入页面来dynamic加载许多其他资源。 我可以看到这是很难合作的。

我认为你的select是真的:

  • 如果许可证是一个友好的开放源代码许可证,请将其分叉并以更现代的模块格式公开,可以通过npm轻松导入。 查看UMD样式 – 您可以编写一个声明,以大多数模块系统(AMD,CommonJS等)可用的格式导出模块。 webpack库和外部页面有一些用其他人可以使用的格式编写模块的指导原则。

  • 如果它不是开源许可证,可以联系作者(s),要求他们更改图书馆的捆绑和加载方式。 这应该是一个简单的销售:一个npm模块将允许更多的人使用他们的代码,并会更容易处理 – 特别是如果他们开始版本化 。 你可以提出为他们做,或只是作为一个例子,他们可以从中复制。

他们有一个页面详细的条款和条件,以及“联系我们”button – 我会从那里开始: http : //napoveda.seznam.cz/cz/mapy/mapy-licencni-podminky/licencni-podminky-mapovych -podkladu /

Interesting Posts