wip

793febaf · Olivier ABDELNOUR · e749d694 · 793febaf
Commit 793febaf authored 1 year ago by Olivier ABDELNOUR
--- a/resources/docs/docs/chapters/tp/bundle2.md
+++ b/resources/docs/docs/chapters/tp/bundle2.md
@@ -91,5 +91,84 @@ After this chapter, thanks to the _ES modules_, there will be no more imported f
        // ...
        ```

+- 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?