将非 npm（旧版）javascript 库与 Jspm 一起使用

Question

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

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

所以问题是我如何使用此类库。同时使用现代方法构建 javascript 个应用程序。

Answer 1

对于不遵循现代模块模式的旧库，方法通常是填充它们。

如果您正在使用 webpack，您可以通过声明 imports and exports.
RequireJS 有类似的 shim config，但需要更多的连接来声明依赖关系。我强烈推荐 webpack 而不是 Grunt/gulp/RequireJS.

但是，查看您链接的 mapy.cz 库，它通过将脚本标记写入页面来动态加载许多其他资产。我可以看到这有多么困难。

我认为你的选择真的是：

如果许可证是友好的开源许可证，请分叉它并以更现代的模块格式公开它，可以通过 npm 轻松导入。查看 UMD style - you can write a declaration that'll export the module in a format usable by most module systems (AMD, CommonJS, etc). The webpack library and externals page 中关于以其他人可以使用的格式编写模块的一些指南。
如果它不是开源许可证，您可以联系作者，要求他们更改库的捆绑和加载方式。它应该很容易销售：一个 npm 模块将允许更多人使用他们的代码，并且更容易使用 - 特别是如果他们开始 versioning 它。你可以主动为他们做，或者只是作为他们可以复制的例子。

他们有一个详细说明条款和条件的页面，以及一个 'contact us' 按钮 - 我将从那里开始：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 一起使用

Using non-npm(legacy) javascript library with Jspm

javascript

node.js

backbone.js

aurelia

jspm