Files
P4RS3LT0NGV3/build/README.md
T

125 lines
3.5 KiB
Markdown

# Build Scripts
## Scripts
### `copy-static.js`
Copies static files to `dist/` directory
- Copies `css/` directory to `dist/css/`
- Copies `favicon.svg` to `dist/favicon.svg`
- Copies `js/` directory structure to `dist/js/`
- Generated files will be overwritten by subsequent build steps
```bash
npm run build:copy
```
### `build-transforms.js`
Bundles all transformers from `src/transformers/` into `dist/js/bundles/transforms-bundle.js`
- Automatically creates the `dist/js/bundles/` directory if it doesn't exist
- Discovers all transformers from category directories
- Generates a single bundled file for browser use
```bash
npm run build:transforms
```
### `build-emoji-data.js`
Fetches Unicode emoji data and generates `dist/js/data/emojiData.js`
- Automatically creates the `dist/js/data/` directory if it doesn't exist
- Uses cached data if available (7-day cache)
- Merges keywords from `src/emojiWordMap.js`
```bash
npm run build:emoji
```
### `inject-tool-scripts.js`
Auto-discovers tools in `js/tools/` and:
- Generates script tags in `index.template.html`
- Generates auto-registration code in `js/core/toolRegistry.js`
```bash
npm run build:tools
```
### `inject-tool-templates.js`
Injects tool templates from `templates/` into `dist/index.html`
- Reads from `index.template.html` (source file)
- Outputs to `dist/index.html` (production file)
```bash
npm run build:templates
```
### `build-alphabet-transforms.js`
Regenerates hand-maintained symbol alphabet files from `data/alphabets/*.json` into `src/transformers/symbol/`.
```bash
npm run build:alphabets
```
Runs automatically before `build-transforms.js` (`npm run build:transforms`).
### `build-code-vendor.js`
Bundles QR and barcode libraries into `js/vendor/` for the Codes tool (no CDN).
```bash
npm run build:codes-vendor
```
### `build-index.js`
Generates `src/transformers/index.js` (Node/test import index).
```bash
npm run build:index
```
## Build Pipeline
```bash
npm run build # Runs all scripts in order:
# 1. build:tools - Inject tool scripts into index.template.html + toolRegistry
# 2. build:codes-vendor - Bundle qrcode, JsBarcode, ZXing → js/vendor/
# 3. build:copy - Copy static files to dist/
# 4. build:index - Generate src/transformers/index.js
# 5. build:transforms - build:alphabets + bundle transformers → dist/js/bundles/
# 6. build:emoji - Generate emoji data to dist/js/data/
# 7. build:templates - Inject templates → dist/index.html
```
## Output Structure
All production files are output to the `dist/` directory:
```
dist/
├── index.html # Generated from index.template.html
├── favicon.svg # Copied from root
├── css/ # Copied from root
│ ├── style.css
│ └── notification.css
└── js/ # Copied from root, then generated files added
├── bundles/
│ └── transforms-bundle.js # Generated
└── data/
└── emojiData.js # Generated
```
## Development Workflow
- **Edit transformers** → `npm run build:transforms`
- **Add new tool** → `npm run build:tools`
- **Edit templates** → `npm run build:templates`
- **Full rebuild** → `npm run build` (outputs to `dist/` folder)
## Production Deployment
The `dist/` folder contains all files needed for production deployment. This folder is:
- Generated by the build process
- Ignored by git (see `.gitignore`)
- Uploaded to GitHub Pages during CI/CD