通过webpack导入Javascript QRCode构造函数

tct7dpnv  于 2022-11-13  发布在  Webpack
关注(0)|答案(2)|浏览(270)

我想使用此存储库中的QRCode生成器:https://github.com/davidshimjs/qrcodejs
我如何通过webpack导入QRCode?当我通过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" 
                                  });

我必须做些什么才能做到这一点?我使用的是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
     }
}
dgsult0t

dgsult0t1#

就像拉兹·罗南说的那样,安装export-loader
这将允许我们向Webpack引入非模块化的js。
安装后,将QRCode模块添加为:

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

基于答案here

zxlwwiss

zxlwwiss2#

使用export-loader生成module.export = <anything you want>
基本上,您需要的是qrcode.min.js模块。export返回QRCode。
您可以为其定义规则:

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

相关问题