diff --git a/resources/docs/docs/chapters/tp/bundle.md b/resources/docs/docs/chapters/tp/bundle2.md similarity index 81% rename from resources/docs/docs/chapters/tp/bundle.md rename to resources/docs/docs/chapters/tp/bundle2.md index c0f666459fbcab9382432b09cb71260274e99b1f..c4cbcacc747c5c248bc877327132676e91beaf77 100644 --- a/resources/docs/docs/chapters/tp/bundle.md +++ b/resources/docs/docs/chapters/tp/bundle2.md @@ -19,17 +19,17 @@ After this chapter, thanks to the _ES modules_, there will be no more imported f **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" + ??? note "Show the utils.js file" === "utils.js" ```js linenums="1" @@ -45,7 +45,51 @@ After this chapter, thanks to the _ES modules_, there will be no more imported f - 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. diff --git a/resources/docs/mkdocs.yml b/resources/docs/mkdocs.yml index 1375ae6b7c9d35a825edc9aac005071215ef69c5..558610c2e4116e0d9d3ec79efca05a9d2a980042 100644 --- a/resources/docs/mkdocs.yml +++ b/resources/docs/mkdocs.yml @@ -5,7 +5,7 @@ nav: - "The package manager": chapters/tp/npm.md - "Single Page Application (SPA)": chapters/tp/spa.md - "Webpack": chapters/tp/webpack.md - - "The bundle": chapters/tp/bundle.md + - "The bundle": chapters/tp/bundle2.md - "CSS Loader": chapters/tp/css-loader.md - "HTML Loader": chapters/tp/html-loader.md - "Classes": chapters/tp/es6-classes.md