diff --git a/resources/docs/docs/chapters/tp/bundle.md b/resources/docs/docs/chapters/tp/bundle.md index 62063acb37117a052d215da3410187a2739c6a82..2470db76938e8b5b55cdd02a8860325cfb29a501 100644 --- a/resources/docs/docs/chapters/tp/bundle.md +++ b/resources/docs/docs/chapters/tp/bundle.md @@ -6,164 +6,3 @@ 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" -=== "welcome.js" - - ```js linenums="1" - export function WelcomeComponent() {} - - /* method WelcomeComponent.init */ - WelcomeComponent.prototype.init = function init() { - // ... - }; - - // ... - ``` - - === "game.js" - - ```js linenums="1" - import { parseUrl } from "./utils"; - - var environment = { - api: { - host: "http://localhost:8081", - }, - }; - - export function GameComponent() { - // ... - } - - /* method GameComponent.init */ - GameComponent.prototype.init = function init() { - // ... - }; - // ... - ``` - - === "score.js" - - ```js linenums="1" - import { parseUrl } from "./utils"; - - export function ScoreComponent() { - // ... - } - // ... - ``` - -- 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?