0

そのため、以前は requireJS を使用したことがありませんでしたが、Qlik Sense がマッシュアップに使用しているため、何らかの方法で試してみる必要がありました。

シンプルなブートストラップ マッシュアップを作成し、highcharts ライブラリを追加し、テーマ Web サイトでブートストラップ管理テーマ (名前 = Naut) を購入しました。

購入したテーマから使用できるすべてのものを単純なブートストラップ マッシュアップ (css、html、js) に移動してから、変更しようとしましたrequire.config

これが私のrequire.configファイルが現在どのように見えるかです。

jQuery はデフォルトで requireJS ファイル内にあることに注意してください (Qlik Sense の開発者はデフォルトでそのようにしたと思います)。

    var config = {
        host: window.location.hostname,
        prefix: "/",
        port: window.location.port,
        isSecure: window.location.protocol === "https:"
    };

    require.config( {
        baseUrl: ( config.isSecure ? "https://" : "http://" ) + config.host + (config.port ? ":" + config.port: "") + config.prefix + "resources",
        paths: {
            bootstrap: "/extensions/fitcloud/js/vendor/bootstrap.min",
            bootstrapSwitch: "/extensions/fitcloud/js/vendor/bootstrap-switch.min",
            highcharts: "/extensions/fitcloud/js/vendor/highcharts",
            senseutils: "/extensions/fitcloud/js/vendor/senseUtils",
            treefy: "/extensions/fitcloud/js/vendor/bootstrap-treefy.min",
            mainsc: "/extensions/fitcloud/js/main",
            vendor: "/extensions/fitcloud/scripts/vendor",
            plugins: "/extensions/fitcloud/scripts/plugins",
            main: "/extensions/fitcloud/scripts/main"
        },
        shim: {
            bootstrap : {
                deps : ['jquery']
            },
            bootstrapSwitch : {
                deps : ['jquery']
            },
            highcharts : {
                deps : ['jquery'],
                exports: 'Highcharts'
            },
            treefy : {
                deps : ['jquery']
            },
            mainsc : {
                deps : ['treefy']
            },
            senseutils : {
                deps : ['bootstrap']
            },
            vendor : {
                deps : ['jquery']
            },
            plugins : {
                deps : ['vendor']
            },
            main : {
                deps : ['plugins']
            }
        }
    } );

    require( ["js/qlik"], function ( qlik ) { qlik.setOnError( function ( error ) { alert( error.message ); } );
        require(["jquery", "bootstrap", "bootstrapSwitch", "highcharts", "senseutils", "treefy", "mainsc", "vendor", "plugins", "main"], function (jq, bs, bss, hs, su, tf, ms, ve, pl, ma) {

var app = qlik.openApp('test.qvf', config);


// All the rest of my javascript code goes in here

});

js ファイルvendor, plugins & mainは、購入したテーマの JavaScript ファイルです。それらを入れrequire.configrequireエラーが発生し始め、アプリが壊れているTypeError: $(...).highcharts is not a functionTypeError: $(...).bootstrapSwitch is not a function、チャートが読み込まれず、bootstrapSwitch ボタンが機能しません。それらを削除すると、テーマのインタラクティブ性がないことを除いて、すべてが正常に機能します(サイドバーを閉じる、メニューをバウンスする、...)。

私は何か間違ったことをしていますか、それともいくつかの関数名が複数のライブラリで使用されている可能性がありますか?

4

1 に答える 1