そのため、以前は 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.config
てrequire
エラーが発生し始め、アプリが壊れているTypeError: $(...).highcharts is not a function
とTypeError: $(...).bootstrapSwitch is not a function
、チャートが読み込まれず、bootstrapSwitch ボタンが機能しません。それらを削除すると、テーマのインタラクティブ性がないことを除いて、すべてが正常に機能します(サイドバーを閉じる、メニューをバウンスする、...)。
私は何か間違ったことをしていますか、それともいくつかの関数名が複数のライブラリで使用されている可能性がありますか?