Table of Contents
IntroductionSteve Kinney introduces Vite, a front-end build tool, and shares their experience using it. They discuss the benefits of Vite, such as fast server start, hot module reloading, and a robust ecosystem of plugins. The topics that will be covered in the lesson, including getting started with Vite, integrating with frameworks like React and Svelte, optimizing static assets, building libraries, implementing module federation, and extending Vite's functionality, are also discussed in this segment.
Vite StarterSteve introduces the Vite framework and demonstrates how to get started with a Vite app. They show how to import files and modules, and how Vite automatically bundles and optimizes the code. They also discuss the production build and how Vite handles static assets.
Dynamic Import & Code SplittingSteve explains how to split an application into multiple chunks using ECMAScript modules. They demonstrate two ways to import files: one that immediately imports the file and one that returns a promise and dynamically fetches the module when the import statement is called. They also discuss the use of Vite Preview, a tool that spins up a web server to test the built production assets and verify the build process.
Styling with Vite
Configure PostCSS & CSS PreprocessorsSteve discusses various ways to process CSS using post-CSS. They demonstrate how to set up post-CSS and configure it by adding plugins such as Tailwind, CSS Nano, and Auto Prefixer. They also show how to use SASS or SCSS in a Vite project by simply installing the SASS dependency.
TypeScript and Frameworks
Configure TypeScriptSteve explains that TypeScript is natively supported in Vite by simply changing the file extension to .ts. They also mention that Vite does not perform type checking, but tools like VS Code can handle that in the editor. They recommend running the TypeScript compiler separately before building to catch any compilation errors.
Vite Templates & Setup ReactSteve demonstrates how to use templates in Vite to quickly set up a project with a specific framework, such as React. They explain how to configure Vite to support React by adding the "plugin-react" plugin and also mention other available plugins and resources for using Vite with different frameworks and tools.
Assets & Imports
Static AssetsSteve discusses how to handle static assets in Vite, By default, anything in the public directory is copied over as is, while anything in the source directory can be accessed. They demonstrate how to import an image from the source directory and how Vite automatically adds a hash to the image URL to bust the cache if the image changes.
Image Loading ExerciseSteve asks students to grab a small image (favicon) and a large image and import them into their project. The learner is then asked to observe the differences in how Vite handles the two images. Vite will inline the small image, converting it into a base64 encoded image and including it directly in the file, while the large image will be split, hashed, and cached automatically.
Vite Image ToolsSteve introduces Vite Image Tools and guides the students through the initial setup process, including installing the Vite Image Tools plugin and creating a configuration file. They also mention that there might be some issues with M1 MacBook users and provide a command to fix it if necessary.
DirectivesSteve demonstrates the ability to resize images, change file formats, and access image metadata using various image tool directives. They also mention other query parameters available in Vite, such as importing raw text or CSS files. The lesson concludes by discussing the limitations of dynamic sources in Vite and mentioning a plugin that can provide more flexibility.
import.metaSteve discusses how import.meta can be used to access environment variables and provides examples of how to use them in development and production environments. They also demonstrate how to add environment files and customize environment variables in Vite. Additionally, they address how to handle import.meta in TypeScript and provide a solution for accessing environment variables in a TypeScript project.
Glob ImportsSteve demonstrates how to use glob imports to match and import multiple files that match a specific pattern, such as importing all SVG files from a folder. They also show how to use eager loading to resolve all the promises at once, making it easier to work with the imported files.
Glob Imports ExerciseSteve explains how to use the import.meta.glob function to import and iterate over JSON files in a directory. The goal is to generate tests based on the JSON data and ensure that the snapshots match. Various use cases for import.meta.glob, such as using it for fixture data or iterating over files based on the file system are also discussed in this segment.
Library ModeSteve explains that Vite is great for creating open-source libraries, especially if you're working with TypeScript or different file types. How to configure Vite to build a library, including specifying the entry point, setting the library name, and configuring external dependencies, is demonstrated. They also show how to optimize the library build by excluding unnecessary dependencies like React.
Generating Declaration FilesSteve explains how to use vite-plugin-dts to generate declaration files for a TypeScript library. They discuss various options available with the plugin and show how to configure the Vite build options to exclude unnecessary files from the library build. Additionally, they mention the possibility of having multiple Vite configurations for different projects.
Injecting CSSSteve explains how to inline CSS styles in a Vite project using a Vite plugin called "vite-plugin-lib-inject-css". They demonstrate how to install the plugin and import it into the project. By doing this, the CSS styles will be bundled together with the module, allowing users to easily import the module and automatically get the associated styles without any additional setup.
Using the LibrarySteve walks through the process of adding additional information to the package.json file, including specifying the main file for CommonJS and ES modules, and pointing to the location of the types. They also discuss how to use the library in another Vite application.
Module FederationSteve delves into the implementation of Module Federation using Vite. The process of building a library, hosting it on the internet, and allowing consuming apps to fetch and use the module at runtime is covered in this segment.
Module Federation Q&ASteve explores the use of module federation, discussing the possibility of assigning a function to the exposed object and experimenting with programmatic manipulation. Practical demonstrations and addressing TypeScript-related issues are also covered in this segment.
Virtual ModulesSteve discusses that a Vite plugin is essentially a function that conforms to a specific shape and can be used to modify the code during the build process. They also mention that there are various hooks available in the plugin development process and provide examples of how plugins can be used to perform specific tasks, such as parsing YAML files or creating virtual modules.
Building a Markdown PluginSteve demonstrates how to create a Vite plugin that transforms Markdown files into HTML. They install the "markdown-it" package, create a helper function to read and render Markdown files, and then create the plugin function that intercepts the loading of Markdown files and returns the transformed HTML. They also mention that this technique can be extended to perform other custom transformations on files.