Go for a more generic js bundling architecture

* Don't tie the output name to webpack itself
* Don't call js bundling webpack in python code
* Make the doc more generic about js bundling
This commit is contained in:
2024-11-18 15:36:05 +01:00
committed by Bartuccio Antoine
parent 3db1f592e2
commit 7b41051d0d
56 changed files with 73 additions and 73 deletions

View File

@ -1,6 +1,6 @@
Vous avez ajouté une application et vous voulez y mettre du javascript ?
Vous voulez importer depuis cette nouvelle application dans votre script géré par webpack ?
Vous voulez importer depuis cette nouvelle application dans votre script géré par le bundler ?
Eh bien il faut manuellement enregistrer dans node où les trouver et c'est très simple.
@ -11,7 +11,7 @@ D'abord, il faut ajouter dans node via `package.json`:
// ...
"imports": {
// ...
"#mon_app:*": "./mon_app/static/webpack/*"
"#mon_app:*": "./mon_app/static/bundled/*"
}
// ...
}
@ -25,7 +25,7 @@ Ensuite, pour faire fonctionne l'auto-complétion, il faut configurer `tsconfig.
// ...
"paths": {
// ...
"#mon_app:*": ["./mon_app/static/webpack/*"]
"#mon_app:*": ["./mon_app/static/bundled/*"]
}
}
}

View File

@ -27,28 +27,28 @@ le système se débrouille automatiquement pour les transformer en `.css`
<link rel="stylesheet" href="{{ static('core/style.scss') }}">
```
## L'intégration webpack
## L'intégration avec le bundler javascript
Webpack est intégré un peu différement. Le principe est très similaire mais
les fichiers sont à mettre dans un dossier `static/webpack` de l'application à la place.
Le bundler javascript est intégré un peu différement. Le principe est très similaire mais
les fichiers sont à mettre dans un dossier `static/bundled` de l'application à la place.
Pour accéder au fichier, il faut utiliser `static` comme pour le reste mais en ajouter `webpack/` comme prefix.
Pour accéder au fichier, il faut utiliser `static` comme pour le reste mais en ajouter `bundled/` comme prefix.
```jinja
{# Example pour ajouter sith/core/webpack/alpine-index.js #}
<script src="{{ static('webpack/alpine-index.js') }}" defer></script>
<script src="{{ static('webpack/other-index.ts') }}" defer></script>
{# Example pour ajouter sith/core/bundled/alpine-index.js #}
<script src="{{ static('bundled/alpine-index.js') }}" defer></script>
<script src="{{ static('bundled/other-index.ts') }}" defer></script>
```
!!!note
Seuls les fichiers se terminant par `index.js` sont exportés par webpack.
Seuls les fichiers se terminant par `index.js` sont exportés par le bundler.
Les autres fichiers sont disponibles à l'import dans le JavaScript comme
si ils étaient tous au même niveau.
### Les imports au sein des fichiers de webpack
### Les imports au sein des fichiers des fichiers javascript bundlés
Pour importer au sein de webpack, il faut préfixer ses imports de `#app:`.
Pour importer au sein d'un fichier js bundlé, il faut préfixer ses imports de `#app:`.
Exemple:

View File

@ -116,7 +116,7 @@ sith/
21. Outil pour faciliter la fabrication des trombinoscopes de promo.
22. Fonctionnalités pour gérer le spam.
23. Gestion des statics du site. Override le système de statics de Django.
Ajoute l'intégration du scss et de webpack
Ajoute l'intégration du scss et du bundler js
de manière transparente pour l'utilisateur.
24. Fichier de configuration de coverage.
25. Fichier de configuration de direnv.
@ -178,7 +178,7 @@ comme suit :
├── templates/ (2)
│ └── ...
├── static/ (3)
│ └── webpack/ (4)
│ └── bundled/ (4)
│ └── ...
├── api.py (5)
├── admin.py (6)
@ -196,7 +196,7 @@ comme suit :
cf. [Gestion des migrations](../howto/migrations.md)
2. Dossier contenant les templates jinja utilisés par cette application.
3. Dossier contenant les fichiers statics (js, css, scss) qui sont récpérée par Django.
4. Dossier contenant du js qui sera process avec webpack. Le contenu sera automatiquement process et accessible comme si ça avait été placé dans le dossier `static/webpack`.
4. Dossier contenant du js qui sera process avec le bundler javascript. Le contenu sera automatiquement process et accessible comme si ça avait été placé dans le dossier `static/bundled`.
5. Fichier contenant les routes d'API liées à cette application
6. Fichier de configuration de l'interface d'administration.
Ce fichier permet de déclarer les modèles de l'application