импортировать конструктор QRCode для Javascript через webpack - PullRequest
Новая
       11

импортировать конструктор QRCode для Javascript через webpack

2 голосов
/ 05 мая 2020

Я хочу использовать генератор QRCode из этого репозитория: https://github.com/davidshimjs/qrcodejs

Как мне импортировать QRCode через веб-пакет? Когда я установил qrcode js через npm, index. js содержал этот код module.exports = 'qrcodejs'; Когда я использую require('qrcodejs'); в своем коде, он возвращает строку 'qrcode js', но я хочу импортировать QRCode конструктор через webpack. Я хочу иметь возможность вызывать конструктор в моем коде таким образом после его импорта с помощью webpack. 

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

Что мне нужно сделать, чтобы выполнить sh это? Я использую ES6 Javascript без каких-либо фреймворков или других библиотек, кроме webpack.

UPDATE

index. js внутри qrcode 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
     }
}

Ответы [ 2 ]

1 голос
/ 10 июня 2020

Как сказал Раз Ронен, установите export-loader .

Это позволит нам добавить в Webpack немодульный js.

После установки добавить модуль QRCode как: 

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

на основе ответа здесь

1 голос
/ 05 мая 2020

Используйте export-loader , чтобы сделать module.export = <anything you want>

в основном то, что вы хотите, это иметь qrcode.min. js module.export return QRCode.

Вы можете определить для него правило: 

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