mirror of
https://github.com/ae-utbm/sith.git
synced 2025-07-09 19:40:19 +00:00
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:
@ -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/*"]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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:
|
||||
|
||||
|
@ -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
|
||||
|
Reference in New Issue
Block a user