Beginners course for esbuild

Learn to use esbuild to manage JavaScript and JSON files, set up the project from provided files, install dependencies with npm install, and build the app with npm run build.

Refactor the header component into its own folder and file, update imports with relative paths and optional extensions to ease switching languages, and bundle multiple JavaScript files with esbuild.

Repeat the same refactoring for the contact list by moving the remaining code into a new contact list folder and importing its content to keep app modular and rebuild smoothly.

Import contacts from data.json by moving the contacts data to a json file, and let esbuild handle json files out of the box.

Import npm packages with esbuild by installing dependencies such as underscore, using each instead of map, updating package.json, and building to ensure runtime imports of third party libraries.

Explore three import types in esbuild: default imports, named parts via destructuring, and side-effect imports, then learn how these choices affect refactoring, optimization, and bundling into one browser-ready file.

Learn to manage html files with IA's build and continue the same app from the previous section. Install dependencies with npm install, run the build, and verify the app works.

Learn how to import HTML files in an esbuild beginner course by configuring loaders for different extensions, loading HTML as text, and verifying output through a build and console log.

Refactor the contact list to use a separate HTML template file, clean test code, and render name and phone values with a framework-agnostic, vanilla JavaScript approach.

Tackle the second challenge by moving the header template to a separate HTML file using esbuild, importing the header template, and ensuring assets load correctly.

Manage images and achieve a successful esbuild build by continuing with your current app or starting from a downloaded zip, installing dependencies, and building again.

learn how esbuild inlines images using a base64 data URL loader, refactor the code to load a logo, adjust relative paths, and configure the loader in package.json for proper bundling.

Learn to manage images as separate files in esbuild by switching from data URLs to file references and configuring a public path in the build.

Import css files with esbuild and modularize styles by component, validating builds and keeping header styling encapsulated for use across pages.

Use same esbuild code from the previous section or unzip starter zip, install dependencies, and set up the build. Enable the watch option to rebuild automatically when changes occur.

Set up a development server by serving the build output from a folder, reorganize project files, adjust references, and run a start script to enable instant rebuilding on code changes.

Learn to reduce code duplication in esbuild configuration by using npm scripts with a trailing double dash to reuse build settings across commands, and verify consistent outputs.

Learn how to move from esbuild's cli to a dedicated JavaScript build script, mapping flags, setting the entry point and loader, and running builds with npm.

Learn how to move to esbuild-serve, restore a development server with live reload, configure root paths, and enable watching to automatically refresh when code changes.

Move the header component to TypeScript by refactoring with type declarations, adding html and image asset typings, and validating the build with npm install and esbuild.

Refactor the contact list from JavaScript to TypeScript, update file extensions, adjust tsconfig with resolve json module and module interop, install types, and verify a successful build.

Finish the TypeScript migration by updating the entry point in the build script, restart the server, and import the index to resolve missing assets, ensuring the app runs.

Enable source maps in the esbuild build to map the bundled code back to the original source, easing browser debugging with meaningful files and breakpoints.

Learn to add scss to a header component in esbuild by integrating a plugin, installing it as a development dependency, and using saaz features with updated imports.

Tackle challenge 3 by adding scss to the component-list, refactoring styles into the source, renaming a file, and updating imports to get the esbuild setup working, with a solution shown.

Explore minification techniques in esbuild to optimize applications. Turn on minify to remove whitespace, rewrite syntax, and rename variables, achieving about a 50 percent reduction in JavaScript size.

Refactor your esbuild project to enable safe tree shaking by replacing side-effect dependencies with explicit interfaces, updating exports, and managing the sideEffects setting.

This lecture demonstrates how tree shaking and modular imports from dependencies, such as replacing underscore with a lighter loadout, reduce bundle size and reveal trade-offs in library choices.

Add another page to your esbuild project by creating an about page, wiring a new entry point, and building with multiple entry points to generate index and about bundles.

Enable code splitting and lazy loading with esbuild to share code between pages, reduce download size, and optimize loading via dynamic imports and proper module formats.

Learn how esbuild enables lazy loading through dynamic imports and code splitting, loading parts of a page while the rest loads, and delaying heavy libraries until triggered.