Question

我正在尝试整合非{npm的this library。我已经多次失败，因为我总是因为使用一些现代框架而茁壮成长，这使我无法整合。

我尝试使用require.js的backbone.js，甚至Dart，现在我顽固地试图使用gulp，jspm，aurelia来实现同样的目标。问题是这个库可能不遵循模块概念。我对这个lib的初始化有很多问题，做了很多补充。

所以问题是如何使用这种类型的库。同时使用现代方法构建javascript应用程序。

Answer 1

对于不遵循现代模块模式的旧图书馆，通常采用的方法是对其进行填充。

如果您正在使用 webpack ，则可以通过声明imports and exports来填充模块。
RequireJS 具有类似shim config，但需要更多连线来声明依赖关系。我强烈推荐webpack over Grunt / gulp / RequireJS。

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

我认为您的选择确实是：

如果许可证是一个友好的开源许可证，请将其分解并以更现代的模块格式公开，可以通过npm轻松导入。查看UMD style - 您可以编写一个声明，以大多数模块系统（AMD，CommonJS等）可用的格式导出模块。 webpack library and externals page有一些以其他人可以使用的格式编写模块的指南。
如果它不是开源许可证，您可以与作者联系，要求他们更改磁带库的捆绑和加载方式。这应该是一个简单的销售：一个npm模块将允许更多的人使用他们的代码，并且更容易使用 - 特别是如果他们开始versioning它。你可以为他们提供，或者只是作为他们可以复制的例子。

他们有一个详细说明条款和条件的页面，以及＆＃39;与我们联系＆＃39;按钮 - 我从那里开始：http://napoveda.seznam.cz/cz/mapy/mapy-licencni-podminky/licencni-podminky-mapovych-podkladu/

Answer 2

查看代码后，我开始工作（我使用了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>

（它不会在此处的代码段中运行，因为JavaScript应放在名为main.js的文件中

编辑：

添加jspm / System.js片段：
（main.js未更改）

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

使用非npm（遗留）javascript库与Jspm

2 个答案: