forked from jsnbuchanan/crowd-funder-for-time-pwa
156 lines
3.6 KiB
Markdown
156 lines
3.6 KiB
Markdown
## Build Configuration
|
|
|
|
### Common Vite Configuration
|
|
```typescript
|
|
// vite.config.common.mts
|
|
export async function createBuildConfig(mode: string) {
|
|
const isCapacitor = mode === "capacitor";
|
|
|
|
return defineConfig({
|
|
build: {
|
|
rollupOptions: {
|
|
output: {
|
|
manualChunks: {
|
|
'vue-vendor': ['vue', 'vue-router', 'vue-facing-decorator']
|
|
}
|
|
}
|
|
}
|
|
},
|
|
define: {
|
|
__USE_QR_READER__: JSON.stringify(!isCapacitor),
|
|
__IS_MOBILE__: JSON.stringify(isCapacitor),
|
|
},
|
|
optimizeDeps: {
|
|
include: [
|
|
'@capacitor-mlkit/barcode-scanning',
|
|
'vue-qrcode-reader'
|
|
]
|
|
},
|
|
resolve: {
|
|
alias: {
|
|
'@capacitor/app': path.resolve(__dirname, 'node_modules/@capacitor/app')
|
|
}
|
|
}
|
|
});
|
|
}
|
|
```
|
|
|
|
### Web-Specific Configuration
|
|
```typescript
|
|
// vite.config.web.mts
|
|
import { defineConfig, mergeConfig } from "vite";
|
|
import { createBuildConfig } from "./vite.config.common.mts";
|
|
|
|
export default defineConfig(async () => {
|
|
const baseConfig = await createBuildConfig('web');
|
|
|
|
return mergeConfig(baseConfig, {
|
|
define: {
|
|
__USE_QR_READER__: true,
|
|
__IS_MOBILE__: false,
|
|
}
|
|
});
|
|
});
|
|
```
|
|
|
|
### Capacitor-Specific Configuration
|
|
```typescript
|
|
// vite.config.capacitor.mts
|
|
import { defineConfig, mergeConfig } from "vite";
|
|
import { createBuildConfig } from "./vite.config.common.mts";
|
|
|
|
export default defineConfig(async () => {
|
|
const baseConfig = await createBuildConfig('capacitor');
|
|
|
|
return mergeConfig(baseConfig, {
|
|
define: {
|
|
__USE_QR_READER__: false,
|
|
__IS_MOBILE__: true,
|
|
},
|
|
build: {
|
|
rollupOptions: {
|
|
external: ['vue-qrcode-reader'], // Exclude web QR reader from mobile builds
|
|
output: {
|
|
entryFileNames: '[name]-mobile.js',
|
|
chunkFileNames: '[name]-mobile.js',
|
|
assetFileNames: '[name]-mobile.[ext]'
|
|
}
|
|
}
|
|
}
|
|
});
|
|
});
|
|
```
|
|
|
|
### Build Scripts
|
|
Add these scripts to your `package.json`:
|
|
```json
|
|
{
|
|
"scripts": {
|
|
"build:web": "vite build --config vite.config.web.mts",
|
|
"build:capacitor": "vite build --config vite.config.capacitor.mts",
|
|
"build:all": "npm run build:web && npm run build:capacitor"
|
|
}
|
|
}
|
|
```
|
|
|
|
### Environment Variables
|
|
Create a `.env` file:
|
|
```bash
|
|
# QR Scanner Configuration
|
|
VITE_QR_SCANNER_ENABLED=true
|
|
VITE_DEFAULT_CAMERA=back
|
|
```
|
|
|
|
### Build Process
|
|
|
|
1. **Web Build**
|
|
```bash
|
|
npm run build:web
|
|
```
|
|
This will:
|
|
- Include vue-qrcode-reader
|
|
- Set __USE_QR_READER__ to true
|
|
- Set __IS_MOBILE__ to false
|
|
- Build for web browsers
|
|
|
|
2. **Capacitor Build**
|
|
```bash
|
|
npm run build:capacitor
|
|
```
|
|
This will:
|
|
- Exclude vue-qrcode-reader
|
|
- Set __USE_QR_READER__ to false
|
|
- Set __IS_MOBILE__ to true
|
|
- Build for mobile platforms
|
|
|
|
3. **Build Both**
|
|
```bash
|
|
npm run build:all
|
|
```
|
|
|
|
### Important Notes
|
|
|
|
1. **Dependencies**
|
|
- Ensure all QR-related dependencies are properly listed in package.json
|
|
- Use exact versions to avoid compatibility issues
|
|
- Consider using peer dependencies for shared libraries
|
|
|
|
2. **Bundle Size**
|
|
- Web build includes vue-qrcode-reader (~100KB)
|
|
- Mobile build includes @capacitor-mlkit/barcode-scanning (~50KB)
|
|
- Consider using dynamic imports for lazy loading
|
|
|
|
3. **Platform Detection**
|
|
- Build flags determine which implementation to use
|
|
- Runtime checks provide fallback options
|
|
- Environment variables can override defaults
|
|
|
|
4. **Performance**
|
|
- Mobile builds optimize for native performance
|
|
- Web builds include necessary polyfills
|
|
- Chunk splitting improves load times
|
|
|
|
5. **Debugging**
|
|
- Source maps are enabled for development
|
|
- Build artifacts are properly named for identification
|
|
- Console logs help track initialization |