Add comprehensive standalone bundle documentation to README
- Added detailed standalone bundle section with usage examples - Included browser (IIFE), ES module, and Node.js (UMD) examples - Documented bundle features and use cases - Updated project structure to include new files - Added build script documentation - Referenced complete example and detailed documentation
This commit is contained in:
parent
874f3c4412
commit
0dcfdeb9e5
128
README.md
128
README.md
@ -203,6 +203,116 @@ if (validation.success) {
|
||||
|
||||
See `examples/vanilla-js-example.html` for a complete vanilla JavaScript implementation.
|
||||
|
||||
## Standalone Bundle
|
||||
|
||||
For projects that need a self-contained solution without external dependencies, we provide a standalone bundle that includes all utilities and dependencies in a single file.
|
||||
|
||||
### Bundle Files
|
||||
|
||||
The standalone build creates three formats in the `dist/` directory:
|
||||
|
||||
- **`qr-code-utils.iife.js`** (28 KB) - Immediately Invoked Function Expression for browser use
|
||||
- **`qr-code-utils.umd.js`** (28 KB) - Universal Module Definition for Node.js and bundlers
|
||||
- **`qr-code-utils.es.js`** (61 KB) - ES Module for modern bundlers and browsers
|
||||
|
||||
### Building the Bundle
|
||||
|
||||
```bash
|
||||
# Build standalone bundle
|
||||
npm run build:standalone
|
||||
|
||||
# Build with detailed information
|
||||
npm run build:standalone:info
|
||||
```
|
||||
|
||||
### Usage Examples
|
||||
|
||||
#### Browser (IIFE)
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>QR Code Generator</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
<!-- Load the standalone bundle -->
|
||||
<script src="qr-code-utils.iife.js"></script>
|
||||
<script>
|
||||
// All functions are available on window.QRCodeUtils
|
||||
async function generateQR() {
|
||||
const qrCode = await window.QRCodeUtils.generateQRCode('Hello World');
|
||||
document.getElementById('qr-code').src = qrCode;
|
||||
}
|
||||
|
||||
generateQR();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
#### ES Module
|
||||
```javascript
|
||||
import { generateQRCode, generateCompleteSVGQRCode } from './qr-code-utils.es.js';
|
||||
|
||||
// Generate basic QR code
|
||||
const qrCode = await generateQRCode('Hello World');
|
||||
|
||||
// Generate QR code with custom image
|
||||
const svgContent = await generateCompleteSVGQRCode(
|
||||
'Hello World',
|
||||
'data:image/png;base64,...', // Custom image
|
||||
20, // Image size percentage
|
||||
'#000000', // Foreground color
|
||||
'#FFFFFF' // Background color
|
||||
);
|
||||
```
|
||||
|
||||
#### Node.js (UMD)
|
||||
```javascript
|
||||
const { generateQRCode } = require('./qr-code-utils.umd.js');
|
||||
|
||||
async function generateQR() {
|
||||
const qrCode = await generateQRCode('Hello World');
|
||||
console.log(qrCode);
|
||||
}
|
||||
|
||||
generateQR();
|
||||
```
|
||||
|
||||
### Standalone Bundle Features
|
||||
|
||||
- ✅ **Zero Dependencies**: No need to install `qrcode` or `imagetracer` separately
|
||||
- ✅ **Framework Agnostic**: Works with React, Vue, Angular, or vanilla JavaScript
|
||||
- ✅ **CDN Ready**: Can be distributed via CDN
|
||||
- ✅ **Production Optimized**: Minified and optimized for performance
|
||||
- ✅ **Multiple Formats**: Choose the format that works best for your use case
|
||||
- ✅ **Complete API**: All functions from `qrCodeUtils.js` are included
|
||||
|
||||
### Use Cases
|
||||
|
||||
1. **Static Websites**: Generate QR codes without any build process
|
||||
2. **CDN Distribution**: Load from CDN for instant use
|
||||
3. **Node.js Applications**: Generate QR codes on the server
|
||||
4. **Modern Bundlers**: Tree-shakeable imports for optimized builds
|
||||
|
||||
### Complete Example
|
||||
|
||||
See `examples/standalone-bundle-example.html` for a complete working example that demonstrates all features of the standalone bundle.
|
||||
|
||||
### Bundle Information
|
||||
|
||||
The standalone bundle includes:
|
||||
- **QR Code Generation**: Complete QR code generation with error correction
|
||||
- **Image Processing**: Custom image embedding with white background
|
||||
- **Vectorization**: Bitmap to SVG vector conversion
|
||||
- **File Handling**: File validation and data URL conversion
|
||||
- **Download Utilities**: SVG download functionality
|
||||
- **Error Handling**: Comprehensive error handling and validation
|
||||
|
||||
For detailed documentation, see [STANDALONE_BUNDLE.md](./STANDALONE_BUNDLE.md).
|
||||
|
||||
## Development
|
||||
|
||||
### Running the Development Server
|
||||
@ -214,7 +324,14 @@ npm run dev
|
||||
### Building for Production
|
||||
|
||||
```bash
|
||||
# Build React app
|
||||
npm run build
|
||||
|
||||
# Build standalone bundle
|
||||
npm run build:standalone
|
||||
|
||||
# Build standalone bundle with detailed info
|
||||
npm run build:standalone:info
|
||||
```
|
||||
|
||||
### Project Structure
|
||||
@ -225,14 +342,23 @@ src/
|
||||
│ └── TextAreaComponent.jsx # Main React component
|
||||
├── utils/
|
||||
│ └── qrCodeUtils.js # Pure JavaScript utility functions
|
||||
├── bundle.js # Bundle entry point
|
||||
├── App.jsx # React app entry point
|
||||
├── main.jsx # React app initialization
|
||||
└── style.css # Global styles
|
||||
|
||||
examples/
|
||||
└── vanilla-js-example.html # Vanilla JavaScript example
|
||||
├── vanilla-js-example.html # Vanilla JavaScript example
|
||||
└── standalone-bundle-example.html # Standalone bundle example
|
||||
|
||||
scripts/
|
||||
└── build-standalone.js # Standalone bundle build script
|
||||
|
||||
dist/ # Production build output
|
||||
├── qr-code-utils.iife.js # Standalone bundle (IIFE)
|
||||
├── qr-code-utils.umd.js # Standalone bundle (UMD)
|
||||
├── qr-code-utils.es.js # Standalone bundle (ES Module)
|
||||
└── bundle-info.json # Bundle information
|
||||
```
|
||||
|
||||
## Dependencies
|
||||
|
||||
Loading…
Reference in New Issue
Block a user