Question

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

该项目使用angular-fullstack yeoman生成器，因此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'。

任何帮助都会得到极大的帮助！

Answer 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);
});

使用Qlik和Webpack 1

1 个答案: