From 31ad2b9b08d8fdb820ebd4f9c5260b4fbfa9076e Mon Sep 17 00:00:00 2001
From: oabdelnour <oabdelnour@takima.fr>
Date: Tue, 27 Feb 2024 15:01:02 +0100
Subject: [PATCH] wip
---
resources/docs/docs/chapters/tp/bundle.md | 117 ++++++++++++++++++++++
1 file changed, 117 insertions(+)
diff --git a/resources/docs/docs/chapters/tp/bundle.md b/resources/docs/docs/chapters/tp/bundle.md
index 2470db7..c0f6664 100644
--- a/resources/docs/docs/chapters/tp/bundle.md
+++ b/resources/docs/docs/chapters/tp/bundle.md
@@ -6,3 +6,120 @@ tag:
- modules
- webpack
---
+
+# The _bundle_
+
+> _Webpack_ bundles everything imported in the entrypoint.
+
+If you look at `dist/main.js` content, you will notice that **the code corresponding to `welcome.js`, `game.js` and `score.js` is missing** because these files are still imported with a `<script>` tag in `index.html` rather than an `import` statement in `main.js`, so _Webpack_ has just ignored them.
+
+Earlier in this chapter, we turned `router.js` into an _ES module_. It's time to do the same for all the aforementioned `*.js` files.
+
+After this chapter, thanks to the _ES modules_, there will be no more imported files in the `index.html`.
+**ES `import` statements will be the glue between files**. With the _bundler_, the importing file responsibility have shifted from _HTML_ to _JS_ files.
+
+=== "before bundler"
+ 
+
+=== "after bundler"
+ 
+
+## :fontawesome-brands-js: **Bundle the JS** code <span id="diy">:fontawesome-solid-wrench: Do it yourself</span> <span id="hard">:fontawesome-solid-star: :fontawesome-solid-star: :fontawesome-solid-star: Hard</span>
+
+- Edit `utils.js`. Look at the `TODO #export-functions` comments for instructions.
+
+ - Write an `export` statement to export the `parseUrl` function.
+??? note "Show the utils.js file"
+ === "utils.js"
+
+ ```js linenums="1"
+ export function parseUrl() {
+ // ...
+ }
+ ```
+
+- Edit `welcome.js`, `game.js` and `score.js`. Look at the `TODO #export-functions` comments for instructions.
+
+ - Remove the _IIFE_
+ - Write an `export` statement to export the component's function.
+ - Write an `import` statement to import the `parseUrl` function if required.
+
+??? note "Show the resulting files"
+
+
+- Edit `main.js`. Look at `TODO #import-components` for instructions.
+
+- Write an `import` statement to import `WelcomeComponent`, `GameComponent` and `ScoreComponent`
+
+??? note "Show the main.js file"
+=== "main.js"
+
+ ```js linenums="1"
+ import { Router } from "./app/scripts/router";
+ import { WelcomeComponent } from "./app/scripts/welcome";
+ import { GameComponent } from "./app/scripts/game";
+ import { ScoreComponent } from "./app/scripts/score";
+
+ const outlet = document.querySelector("#content-outlet");
+ const router = new Router(outlet);
+ router.register("", {
+ component: WelcomeComponent,
+ templateUrl: "/src/app/views/welcome.html",
+ });
+ // ...
+ ```
+
+- Edit `index.html`. Remove all `<script>` tag as everything is now bundled by _Webpack_.
+
+??? note "Show the index.html file"
+=== "index.html"
+
+ ```html linenums="1"
+ <!DOCTYPE html>
+ <html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <title>MÈME ory</title>
+ <!-- TODO #import-css: move style imports to src/main.js -->
+ <!-- TODO #npm-bootstrap: change css location to '/node_modules/bootstrap/dist/css/bootstrap.css' -->
+ <link rel="stylesheet" href="/src/app/styles/bootstrap.css" />
+
+ <link rel="stylesheet" href="/src/app/styles/style.css" />
+ </head>
+
+ <body>
+ <div id="content-outlet" class="h-100 w-100 d-flex flex-column"></div>
+ </body>
+ </html>
+ ```
+
+- Test the application: navigate to [http://localhost:8080](http://localhost:8080), the application should work as usual and show no error in the console 🎉.
+
+- Build the application.
+
+??? note "Show the build command"
+
+ ```bash linenums="1"
+ npm run build
+ ```
+
+#### :fontawesome-solid-folder-tree: Modified files
+
+```
+src/app/scripts/game.js
+src/app/scripts/score.js
+src/app/scripts/utils.js
+src/app/scripts/welcome.js
+src/main.js
+src/index.html
+```
+
+#### :fontawesome-solid-list-check: Checklist
+
+- <input type="checkbox" /> I know how to use the `import` keyword and do **named imports**.
+- <input type="checkbox" /> The codebase has no unresolved `TODO #export-functions` comments left.
+- <input type="checkbox" /> The codebase has no unresolved `TODO #import-components` comments left.
+- <input type="checkbox" /> The codebase has no _IIFE_ left.
+
+!!! question "Question"
+Look at the `dist/main.js` file, generated by the build command. What is its size?
--
GitLab