通过webpack导入Javascript的QRCode构造函数。

Question

我想使用这个仓库中的QRCode生成器。https:/github.comdavidshimjsqrcodejs。

如何通过webpack导入QRCode？当我通过npm安装qrcodejs时，index.js中包含以下代码 module.exports = 'qrcodejs'; 当我使用 require('qrcodejs'); 在我的代码中，它返回字符串'qrcodejs'，但我想通过webpack导入QRCode构造函数。我希望通过webpack导入QRCode构造函数后，能够在我的代码中这样调用它。

let qrcode = new QRCode("output", { 
                                    text: "http://google.com", 
                                    width: 100, 
                                    height: 100, 
                                    colorDark: "#188710", 
                                    colorLight: "#ffffff" 
                                  });

我应该怎么做才能做到这一点？我使用的是ES6 Javascript，除了webpack之外，没有使用任何框架或其他库。

更新

在qrcodejs文件夹内的index.js。

module.exports = {
    module: {
        rules: [
            { test: /qrcode/, loader: 'exports-loader?QRCode' }
        ]
    }
}

myproject.js

  import { QRCode } from 'qrcodejs'

export class EditProduct {

     openProduct(){
        let test = require('qrcodejs'); // returns the module object with the rules array
         let test2 = QRCode // returns undefined
     }
}

Answer 1

正如Raz Ronen所说，安装 出口装载机.

这将使我们能够在Webpack中引入非模块化的js。

安装后将QRCode模块添加为。

import QRCode from 'exports-loader?QRCode!qrcodejs/qrcode'

根据答案 此处

Answer 2

使用 出口装载机 以使 module.export = <anything you want>

基本上你想要的是让qrcode.min.js module.export返回QRCode。

你可以为它定义一个规则。

module: {
  rules: [
    { test: /qrcode/, loader: 'exports-loader?QRCode' }
  ]
}