Question

所以我之前从未使用过requireJS，但由于Qlik Sense正在使用它作为mashup，我必须尝试这种或那种方式。

我刚刚制作了一个简单的bootstrap mashup，添加了highcharts库并在主题网站上购买了一个bootstrap管理主题（name = Naut）。

我将所有可以使用的东西从购买的主题移动到简单的bootstrap mashup（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＆amp; TypeError: $(...).bootstrapSwitch is not a function我的应用程序坏了，没有加载图表，bootstrapSwitch按钮无法正常工作。如果我删除它们，everthing工作正常，除了我没有主题所具有的交互性（关闭边栏，弹出菜单，......）。

我做错了什么，或者可能是多个库中使用了某些函数名称？

Answer 1

你的扩展开头应该是这样的（属性，qlik，jquery，之后总是需要js依赖，但是你可能需要

define(["./properties", "qlik","jquery","highcharts", "bootstrapSwitch"], 
    function(Props, qlik,$,highcharts,boostrapswitch) {

要解释一下，它首先加载实际文件中的这部分定义（[“./ properties”，“qlik”，“jquery”，“highcharts”，“bootstrapSwitch”]，

这告诉Qlik要引入哪些JS文件（你实际上不需要在文件之后放入.js。

当您未将这些js文件中的内容正确传递给函数时，您所描述的错误就会发生。这是在第二部分完成的。

    function(Props, qlik,$,highcharts,boostrapswitch)

您看到 5 params 因为您最初传递 5个js文件。

您需要确保两个部分的顺序相同。

以下是Qlik Sense扩展的示例，我建议您检查properties.js和TalkToQlik.js以查看其外观。 https://github.com/cookiejest/TalkToQlik

以下是该扩展程序的一些说明： http://webofwork.com/qlik-sense-voice-control-extension-for-accessibility/

Qlik Sense mashup RequireJS添加js文件给出错误'不是函数'

1 个答案: