将 Qlik 与 Webpack 1 一起使用答案

【问题标题】：Using Qlik with Webpack 1将 Qlik 与 Webpack 1 一起使用
【发布时间】：2017-04-04 23:25:06
【问题描述】：

我正在使用 webpack 1 尝试从一个名为 Qlik 的产品中导入一个以 amd 模块模式编写的外部 js 文件，该产品进行可视化。

项目使用angular-fullstack yeoman generator，所以webpack配置文件为：https://github.com/angular-fullstack/generator-angular-fullstack/blob/master/templates/app/webpack.make.js

试图让这样的东西在 webpack 环境中工作： https://gist.github.com/mindspank/905294636006b3b530a0#file-index-js-L19

我要导入和使用的文件：https://sense-demo.qlik.com/resources/js/qlik.js

我试过scriptjs之类的东西来加载它，但是webpack无法解决它。

$script('https://sense-demo.qlik.com/resources/assets/external/requirejs/require.js', () => {
    require.config = {
        baseUrl: 'https://sense-demo.qlik.com/resources'
    }

    require(['js/qlik'], qlik => {
        let app = qlik.openApp(...);
    }
});
// throws Module not found: Error: Cannot resolve module 'js/qlik'

我也尝试将其本地添加到项目中并在 webpack 中引用它：

config.externals = {
    'qlik' : 'commonjs2 ./client/assets/js/qlik'
}

usage:
require(['qlik'], qlik => {
    console.log(qlik);
});
// throws Uncaught ReferenceError: require is not defined

或

config.resolve = {
    root: [
      path.join(__dirname, ('/client/assets/js'))
    ]
};
// throws tons of errors similar to:
ERROR in ./client/assets/js/qlik.js
Module not found: Error: Cannot resolve module 'cm.matchbrackets' in \client\assets\js

我的问题是，我不知道如何通过 webpack 使用这个外部脚本。在 scriptjs 中运行并保存 qlik 脚本并在本地添加它们时无法解析 'js/qlik'。

任何帮助将不胜感激！

【问题讨论】：

标签： javascript webpack qlikview angular-fullstack

【解决方案1】：

也许这会有所帮助？

我们使用 Webpack 2 和 Angular2（带有 TypeScript）并通过在 HTML 文件中包含 Qlik 的 require.js 来解决它，然后像这样在全局范围内引用它：

const requireJs = (<any>window).requirejs;

const requireJsConfig = {
  host: <url>,
  prefix: '/',
  port: <port>,
  isSecure: true
};

const qlikConfig = {
  appId: <appId>,
  objectId: <objectId>
};

requireJs.config( {
  baseUrl: ( requireJsConfig.isSecure ? 'https://' : 'http://' ) + requireJsConfig.host + (requireJsConfig.port ? ':' + requireJsConfig.port : '') + requireJsConfig.prefix + 'resources'
});

requireJs(['js/qlik'], function (qlik) {
  let const = qlik.openApp(qlikConfig.appId, requireJsConfig);
  app.getObject(<container-div>, qlikConfig.objectId);
});

【讨论】：