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:

Install the package using npm:

# Navigate to the nginx directory
cd nginx

# Install the package
npm install --save <package-name>

# Example: Install Chart.js
npm install --save chart.js

Import the library in nginx/frontend_src/js/main.js:

// Add your import statement
import Chart from 'chart.js/auto';

// If the library needs to be globally available, add:
window.Chart = Chart;

Rebuild the bundled JavaScript:
```
# Run the build process
npm run build
```
Verify the library works by checking the browser console and testing functionality.

Removing a JavaScript Library

To remove a JavaScript library:

Remove the import statement from nginx/frontend_src/js/main.js

Uninstall the npm package:

cd nginx
npm uninstall <package-name>

# Example: Uninstall Chart.js
npm uninstall chart.js

Rebuild the bundled JavaScript:
```
npm run build
```
Update any code that was using the library to prevent errors.

Updating a JavaScript Library

To update an existing library:

Update the package:

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

Check for breaking changes in the library's documentation.
Update import statements in main.js if the API has changed.
Rebuild the bundled JavaScript:
```
npm run build
```
Test thoroughly to ensure the update doesn't break existing functionality.

Troubleshooting Common Issues

Library Not Found

If you get "Cannot find module" errors:

2.4 KiB Raw Blame History