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

Question

我想使用这个 repo 中的 QRCode 生成器：https ://github.com/davidshimjs/qrcodejs

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

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

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

更新

qrcodejs 文件夹中的 index.js

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

我的项目.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
     }
}

标签： javascriptnode.jswebpackqr-code

Answer 1

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

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

安装后添加 QRCode 模块为：

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

根据这里的答案