Qlik 如何导入依赖于 ether other 的 JS 库

Question

我正在构建自定义扩展并需要 Chartjs 来完成。

我有以下进口商品

define( [
        'jquery',
        './PropertiesPannel',
        '//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js',
        '//cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js',
        '//cdn.jsdelivr.net/npm/chartjs-plugin-zoom@0.7.5/dist/chartjs-plugin-zoom.min.js'
    ],
    function ( $, ProperitesPannel, Chart) {
        'use strict';
....

我收到以下控制台错误。

hammerjs.js:1 Uncaught SyntaxError: Unexpected token '<'
3setup-view.d91ae8b7669a979d2ec1.js:8 TypeError: Cannot read property 'helpers' of undefined
    at chartjs-plugin-zoom.min.js:11
    at Object.execCb (setup-view.d91ae8b7669a979d2ec1.js:8)
    at n.check (setup-view.d91ae8b7669a979d2ec1.js:8)
    at n.<anonymous> (setup-view.d91ae8b7669a979d2ec1.js:8)
    at setup-view.d91ae8b7669a979d2ec1.js:8
    at setup-view.d91ae8b7669a979d2ec1.js:8
    at each (setup-view.d91ae8b7669a979d2ec1.js:8)
    at n.emit (setup-view.d91ae8b7669a979d2ec1.js:8)
    at n.check (setup-view.d91ae8b7669a979d2ec1.js:8)
    at n.enable (setup-view.d91ae8b7669a979d2ec1.js:8)

我了解 chartjs 插件文件需要图表文件和锤子。我怎样才能把这些联系起来？

Answer 1

这个问题不大...chartjs 插件试图加载 chart.js 这不是一个有效的模块 ID，而是一个文件名。所以 RequireJS 会尝试将它作为文件加载，即使我在 require.config.paths 中设置它...所以这里有一些解决方法：

<script src=https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.js></script>
<script>
    require.config({
        paths: {
            jquery: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min',
            'chart': '//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle',
            hammerjs: '//cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min'
        }
    });

    var originalDefine = define;

    window.define = function (a, b, c) {
        // when chartjs-plugin-zoom.min.js tries to load chart.js, load the chart module from the defined paths :)
        if (a && a.length && a[0] === 'chart.js') {
            a[0] = 'chart';
        }
        originalDefine(a, b, c);
    };

    require([
        'jquery',
        'chart',
        'hammerjs',
        '//cdn.jsdelivr.net/npm/chartjs-plugin-zoom@0.7.5/dist/chartjs-plugin-zoom.min.js'
    ], function ($, chart, hammer, chartjs) {
        'use strict';
        console.log('hello world');
        console.log($, chart, hammer, chartjs);
    });
</script>

加载正常，您可以开始了

Qlik 如何导入依赖于 ether other 的 JS 库

Qlik How to import JS Libraries that are Depended of ether other

javascript

qlikview

requirejs

qliksense