Command Palette

Search for a command to run...

Hectal
Phase 12Intermediate13 of 16 in JavaScript

Modules and Tooling

Split code into ES modules, load code on demand with import(), manage packages with npm, and meet bundlers, linters, formatters and TypeScript.

Real programs are not one long file. This phase teaches ES modules: how a file exports what it wants to share and another file imports it, why modules have their own scope and always run in strict mode, and how the browser loads a whole graph of files from one <script type="module">. Then **dynamic import(), which loads code only when it is needed, the idea behind code splitting**.

The second half is the toolbox every JavaScript job uses: npm and package.json (dependencies, scripts, version ranges and lockfiles), bundlers and dev servers such as Vite (why we bundle, what transpiling means), ESLint and Prettier (catching bugs and ending style arguments), and a first look at TypeScript, which adds types you check before running and then removes them.

The live preview is one page, so it can't hold several files. Live examples use <script type="module">, import maps and data: URLs to create small modules inside the page, or simulate a tool in a few lines. Multi-file projects, npm, Vite, ESLint and TypeScript are shown as normal code blocks with realistic terminal output, exactly what you'll see on your own computer.

0/6 · 0%
6 topics ~3 h 20 code blocks & diagrams
Start with the first topic
1
12.1

ES Modules

An ES module is a JavaScript file with its own private scope that shares values with export and receives them with import; the browser loads modules with <script type="module">, runs them in strict mode, deferred, and only once each.

31 min 4 code practice

2
12.2

Dynamic import() and Code Splitting

import(specifier) loads a module while the program is running and returns a promise of its namespace object, so code can be fetched only when it is needed; bundlers use it to split an app into smaller files called chunks.

23 min 4 code practice

3
12.3

npm and package.json

npm is the package manager that comes with Node.js: package.json lists your project's name, scripts and the packages it depends on (with version ranges), node_modules holds the installed code, and the lockfile pins the exact versions so every install is identical.

30 min 3 code practice

4
12.4

Bundlers and Dev Servers

A bundler follows your imports from one entry file and combines the modules into a few optimised files, transpiling new syntax for older browsers, removing unused code and minifying; a dev server such as Vite serves your code instantly while you work and updates the page as you save.

25 min 3 code practice

5
12.5

Linting and Formatting

A linter such as ESLint reads your code without running it and reports likely bugs and banned patterns; a formatter such as Prettier rewrites the layout (spaces, quotes, line breaks) into one consistent style; your editor and a pre-commit check run both automatically.

24 min 3 code practice

6
12.6

TypeScript, a First Look

TypeScript is JavaScript plus type annotations: a checker reads the types before your code runs and reports mistakes such as passing a string where a number is expected, then the types are removed and plain JavaScript runs in the browser.

28 min 3 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.

1

Import from a module

The import map in the HTML tab defines a module called shop. It has a default export (the shop's name) and a named export withTax(price).

Beginner
2

Fix the broken module script

This page should show Hello, Asha! (en). The script has three module mistakes. Run it, read each error in the console, and fix them one at a time.

Beginner
3

From TypeScript to JavaScript

The JavaScript tab actually contains TypeScript, so the browser fails with a SyntaxError. Do the compiler's job by hand: remove every type so it becomes plain JavaScript that works the same.

Intermediate
4

Load the report only when asked

REPORT_URL is a module whose default export makeReport(sales) returns a sentence. It prints report module loaded when it runs.

Intermediate
5

Write npm's version check

Write a function satisfies(version, range) that returns true when the version is allowed by the range, the way npm decides it:

Intermediate
6

Lazy-loaded tabs

Build tabs whose content is code-split: each tab's content comes from its own module in PAGES, loaded with import() only when the tab is first opened. Each module prints <name> module loaded when it runs, and its default export returns the tab's text.

Intermediate