通过 webpack 为 Javascript 导入 QRCode 构造函数

Question

我想使用此存储库中的 QRCode 生成器：https://github.com/davidshimjs/qrcodejs

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

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

我需要做什么才能做到这一点？我正在使用 ES6 Javascript 除了 webpack 之外没有任何框架或其他库。

更新

index.js qrcodejs文件夹里面

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

使用export-loader使module.export = <anything you want>

基本上你想要的是qrcode.min.js module.export return QRCode.

您可以为其定义规则：

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

Answer 2

正如Raz Ronen所说，安装export-loader。

这将允许我们将非模块化 js 引入 Webpack。

安装后添加二维码模块为：

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

基于答案here

通过 webpack 为 Javascript 导入 QRCode 构造函数

import QRCode constructor for Javascript through webpack

javascript

qr-code

node.js

webpack

更新