Vite for developers

Explore the section's structure for vid: two lectures cover what vid is and first contact, while three optional lectures cover JavaScript modules, module bundling, and tree shaking.

Vite is a fast build tool for web apps with framework defaults, using esbuild in development and rollup for production, plus a development server, scaffolding, and a plugin system.

Create and explore vite projects from vanilla javascript to react with typescript, using npm commands like npm create vit at latest, managing folders, dev, build, and preview workflows.

Explore JavaScript modules, comparing CommonJS and ES modules, and learn how to isolate code to avoid global scope pollution, using require, export, import, and type module in browsers.

Explore module bundling and how esbuild powers development while rollup handles production, creating faster, fewer bundles. Learn about entry points, dist outputs, minify toggles, source maps, and tree shaking.

Understand tree shaking as removing dead code and see how bundlers exclude unused functions from final bundles, improving bundle size.

Explore Vite's core features, including hot module reloading, the configuration system, environment variables, and multi-route bundling, illustrated with a JavaScript project and React; learn the plugin system.

Explore hot module replacement, a fast, state-preserving update system in development that delivers instant feedback as you edit code in frameworks like React, Vue, and Angular with Vite.

Vite handles static assets by copying from the public folder or optimizing them when imported, inlining small files under four kilobytes.

Learn to configure a vite project by creating a config file, using define config for intellisense, adding plugins, and adjusting server options such as the port 4000.

Learn how vite handles environment variables, loading them from dot env files and exposing them via import.meta.env, with customizable prefixes and multi-environment setups.

Demonstrates how to support multiple routes in a vite app with a main page and an admin page. Explains configuring build.rollupOptions inputs to produce separate entries for production deployment.

Discover how to split code into multiple bundles with vite using manual chunks, separating vendor dependencies from your own code for faster deployments and better browser caching.

Explore Vite's plugin system, learn how to install and configure rollup-compatible plugins, and test a console-removal plugin from development to production.

Write a math library with Vite and TypeScript, exploring library mode, npm export, and type safety, then test in a simple app, install from disk, and avoid npm publishing.

Build a vanilla TypeScript math library with Vite in library mode, including setup, function implementations (average, sum, median, factorial), and using an external library like UUID, with ES module output.

Learn to optimize a project for npm export by configuring package.json for main, module, and exports, using dist files and import syntax, and test via local path linking.

Discover how to add TypeScript types to a generated library without plugins by configuring tsc to emit declarations to dist, then adjust build order and package.json exports to expose types.

optimize your library bundle by excluding the uuid dependency with rollup external, preventing code duplication and ensuring dependencies load from node_modules.

Explore ESLint, bundle visualizer, and the host option to test your app on mobile. Include glob imports and plan for future topics.

Implement linting in your project with Vite and ESLint for JavaScript and TypeScript, configure rules via eslint.config.js, and run npm run lint to enforce coding standards.

Use the Vite bundle visualizer to generate a visual analysis of your project and dependencies, compare production and vendor bundles, and view size by files.

Expose your dev server using the Vite host option and test on a mobile device by connecting to the same wifi with npm run dev and the host flag.

Learn how Vite glob imports load multiple files with one line, and render images from a London assets folder with eager imports and TypeScript typings in a React component.

See how Vite handles CSS by importing plain CSS and CSS modules in a basic JavaScript project, with assets and module CSS for red and blue styles.

Learn to install Vitest as a development dependency, configure tests for a simple project and for React, and apply the arrange, act, and assert pattern with expect and test.

Configure Vitest for a React and TypeScript project by installing testing dependencies, creating setup.ts and vtest.config.ts, and writing React Testing Library tests with jsdom and user event.

Create an image watermark plugin for a web app using node sharp, with configurable text, color, and position. Review the plugin code to understand how plugins work under the hood.

Export a watermark plugin function for vite, returning a name and a transform function to process source files, and wire it into the config's plugins array inside a plugins folder.

Install sharp as a dev dependency and implement a transform that processes image files, then apply an SVG overlay watermark with sharp's composite and output a base64 image.

Define an optional options type for the watermark plugin with text, position, color, and font size. Use default values and the spread operator with TypeScript for flexible plugin arguments.

Install vite plugin inspect as a dev dependency, add it to your plugins, and use the inspect url to view per-file plugin effects and build-time changes.

Discover the future of vit by examining its proposed roll down bundler, built in rust for speed, enabling seamless integration with vite, while remaining experimental and not production-ready.

Conclude your learning journey with this final lecture, thanking students for choosing the course and encouraging continued practice with vid features to tackle complex projects and bugs.