Vite

In a project built by Vite, index.html is usually the entry point of the project. While we can put the copyright notice in the JavaScript bundle, it is often desirable to add it directly to the HTML file for various reasons. For example, maybe the copyright notice is entangled with the privacy policy or terms of service links, which we usually want to make visible even when the user turns off JavaScript. A straightforward solution is to add a copyright notice with a fixed year to the footer like: <footer> Copyright &copy; 2024 My Name </footer> However, it can be quite annoying to bump the year in every project, even though it’s only once per year. In this post, we present a simple and clean solution to address this problem using the HTML transformation hook of Vite. This solution does not use in-page JavaScript so that users can see them even without JavaScript enabled. We have also created a package @8hobbies/vite-plugin-year that uses the solution from this post for your convenience. ...

Vite is a modern tool for frontend development. One of Vite’s functionalities is to deploy the app for production, including bundling all JavaScript (JS) files. Although Vite supports building for a particular browser target, it only transforms syntax with the help of ebuild, but does not perform any JavaScript polyfill. However, polyfill is essential for many projects. On the one hand, it’s often error-prone to manually polyfill, such as using core-js manually. On the other hand, an on-demand polyfill service like polyfill.io bears its own limitations and security risks. Therefore, it is ideal to use an automatic polyfill mechanism that is integrated with Vite. In this post, we discuss how to automatically polyfill JavaScript APIs in a Vite project with the help of the Vite legacy plugin. ...