mirror of
https://github.com/ae-utbm/sith.git
synced 2025-07-10 11:59:23 +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:
|
||||
|
||||
|
Reference in New Issue
Block a user