Add developer documentation for javascript library management

This commit is contained in:
Josako
2025-05-27 17:46:51 +02:00
parent 5123de55cc
commit 4d79c4fd5a

View File

@@ -0,0 +1,108 @@
# JavaScript Library Management in EveAI Frontend
This document explains how to add, remove, or update JavaScript libraries in the EveAI frontend. The frontend uses npm for package management and Parcel for bundling.
## Overview
Our frontend JavaScript setup uses:
- **npm**: To manage package dependencies
- **Parcel**: To bundle our JavaScript libraries into a single file
- **main.js**: The entry point that imports all required libraries
The bundled output is placed in `static/dist/main.js` and included in our templates.
## Adding a JavaScript Library
To add a new JavaScript library to the project:
1. **Install the package using npm:**
```bash
# Navigate to the nginx directory
cd nginx
# Install the package
npm install --save <package-name>
# Example: Install Chart.js
npm install --save chart.js
```
2. **Import the library in `nginx/frontend_src/js/main.js`:**
```javascript
// Add your import statement
import Chart from 'chart.js/auto';
// If the library needs to be globally available, add:
window.Chart = Chart;
```
3. **Rebuild the bundled JavaScript:**
```bash
# Run the build process
npm run build
```
4. **Verify the library works** by checking the browser console and testing functionality.
## Removing a JavaScript Library
To remove a JavaScript library:
1. **Remove the import statement** from `nginx/frontend_src/js/main.js`
2. **Uninstall the npm package:**
```bash
cd nginx
npm uninstall <package-name>
# Example: Uninstall Chart.js
npm uninstall chart.js
```
3. **Rebuild the bundled JavaScript:**
```bash
npm run build
```
4. **Update any code** that was using the library to prevent errors.
## Updating a JavaScript Library
To update an existing library:
1. **Update the package:**
```bash
cd nginx
npm update <package-name>
# To update to a specific version:
npm install <package-name>@<version>
# Example: Update Bootstrap to version 5.3.0
npm install bootstrap@5.3.0
```
2. **Check for breaking changes** in the library's documentation.
3. **Update import statements** in `main.js` if the API has changed.
4. **Rebuild the bundled JavaScript:**
```bash
npm run build
```
5. **Test thoroughly** to ensure the update doesn't break existing functionality.
## Troubleshooting Common Issues
### Library Not Found
If you get "Cannot find module" errors: