From 17e47d304a5d84c29446fb36920499393d63a727 Mon Sep 17 00:00:00 2001 From: oabdelnour <oabdelnour@takima.fr> Date: Tue, 27 Feb 2024 15:07:23 +0100 Subject: [PATCH] wip --- resources/docs/docs/chapters/tp/bundle2.md | 67 ++++++++++++++++++++++ 1 file changed, 67 insertions(+) diff --git a/resources/docs/docs/chapters/tp/bundle2.md b/resources/docs/docs/chapters/tp/bundle2.md index 0e2fb3a..9318767 100644 --- a/resources/docs/docs/chapters/tp/bundle2.md +++ b/resources/docs/docs/chapters/tp/bundle2.md @@ -24,3 +24,70 @@ After this chapter, thanks to the _ES modules_, there will be no more imported f === "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() { + // ... + } + // ... + ``` + -- GitLab