Michel2/qr-scanner
1
0
Fork 0
mirror of https://github.com/nimiq/qr-scanner.git synced 2026-07-28 04:06:51 +00:00
Code Activity

Readme: improve webpack usage instructions

Browse Source 
Improve the instructions for file-loader and add instructions for
raw-loader (see PR #60).

Co-authored-by: Gustavo Honorato <gustavohonorato@gmail.com>
This commit is contained in:
Daniel
2020-07-07 14:36:50 +02:00
co-authored by Gustavo Honorato
parent 7776d8bca0
commit ee9e8f6fe6
1 changed files with 35 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+35 -3
View File
@@ -40,7 +40,7 @@ The QR Scanner consists of two files.
`qr-scanner.min.js` is the main API as an es6 module and can be imported as follows:
```js
import QrScanner from 'path/to/qr-scanner.min.js'; // if using plain es6 import
import QrScanner from 'qr-scanner'; // if installed via package and bundling with webpack or rollup
import QrScanner from 'qr-scanner'; // if installed via package and bundling with a bundler like webpack or rollup
```
This requires the importing script to also be an es6 module or a module script tag, e.g.:
```html
@@ -50,17 +50,49 @@ This requires the importing script to also be an es6 module or a module script t
</script>
```
`qr-scanner-worker.min.js` is a plain Javascript file for the separate worker thread and needs to be copied over to your project. You should then point `QrScanner.WORKER_PATH` to where you put that file:
`qr-scanner-worker.min.js` is a plain Javascript file for the separate worker thread and needs to be copied over to your project. You should then point `QrScanner.WORKER_PATH` to the location where it will be hosted:
```js
QrScanner.WORKER_PATH = 'path/to/qr-scanner-worker.min.js';
```
If you're using webpack to bundle your project, the file loader might be interesting for you to automatically copy the worker into your build:
### Webpack specific setup
If you're using [Webpack](https://webpack.js.org/) to bundle your project, the [file-loader](https://webpack.js.org/loaders/file-loader/) or [raw-loader](https://webpack.js.org/loaders/raw-loader/) might be interesting for you for handling the `qr-scanner-worker.min.js` dependency. Which one to choose depends on your use case.
#### Using file-loader
The `file-loader` automatically copies the worker script into your build and provides the path where it will be located in the build. At runtime, the worker will then be lazy-loaded from there when needed. Due to its ability to lazy-load the worker, using the `file-loader` is the preferred approach if you do not expect the QR scanner to be used every time a user uses your app or if the QR scanner is not launched right after loading the app.
You can add the `file-loader` to your project via:
```bash
npm install --save-dev file-loader
```
You can then use it to copy the worker file and obtain the `WORKER_PATH`:
```js
import QrScannerWorkerPath from '!!file-loader!./node_modules/qr-scanner/qr-scanner-worker.min.js';
QrScannerLib.WORKER_PATH = QrScannerWorkerPath;
```
Note that the path to the worker file has to be set relatively to the source file where you use it. For example, if your source file using the `QrScanner` sits in `/src/components`, the correct import would be `import QrScannerWorkerPath from '!!file-loader!../../node_modules/qr-scanner/qr-scanner-worker.min.js';`.
#### Using raw-loader
The `raw-loader` bundles the worker as string into your build, thus no separate file gets generated in your build output. While this simplifies the build output and avoids an additional network request, it increases your bundle size and removes the ability to lazy-load the worker file only when needed.
You can add the `raw-loader` to your project via:
```bash
npm install --save-dev raw-loader
```
You can then use it to load the worker file and set the `WORKER_PATH`:
```js
import qrScannerWorkerSource from '!!raw-loader!./node_modules/qr-scanner/qr-scanner-worker.min.js';
QrScanner.WORKER_PATH = URL.createObjectURL(new Blob([qrScannerWorkerSource]));
```
Note that the path to the worker file has to be set relatively to the source file where you use it. For example, if your source file using the `QrScanner` sits in `/src/components`, the correct import would be `import qrScannerWorkerSource from '!!raw-loader!../../node_modules/qr-scanner/qr-scanner-worker.min.js';`.
## Usage
### Web Cam Scanning