109 lines
2.4 KiB
Markdown
109 lines
2.4 KiB
Markdown
# 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:
|