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: