Converting to Vite (Part 3)

#webdev #javascript #vite #tooling

In Part 3 of this series, we'll talk about our use of various plugins for Vite on the Open Sauced project. Vite provides extensibility in the form of a Plugin API, based on that of Rollup. For reference on which Rollup plugins Vite is compatible with (and to what degree), see Vite Rollup Plugins

Once we were able to get things realigned with our dependencies and we were able to get Vite to build everything correctly for the simplest cases (production build on browsers supporting ESM), we shifted our focus to restoring tooling feature parity to what we had with Webpack (or at least the parts we cared about). Frankly these were some things that I personally wasn't intimately familiar with, so the vast majority of configuring Vite plugins was done by @0vortex. That said, the easiest way for me to talk about this is to just refer to the imports section of our vite.config.ts file.

import ViteReact from '@vitejs/plugin-react'
import ViteEslint from '@nabla/vite-plugin-eslint'
import ViteHtml from 'vite-plugin-html'
import ViteInspect from 'vite-plugin-inspect'
import ViteLegacy from '@vitejs/plugin-legacy'
import { VitePWA, VitePWAOptions } from 'vite-plugin-pwa'
import ViteReplace from '@rollup/plugin-replace'
import ViteTimeReporter from 'vite-plugin-time-reporter'
import ViteVisualizer from 'rollup-plugin-visualizer'

As you might guess, the @vitejs/plugin-react plugin is the one most directly responsible for getting Open Sauced to build in Vite, generally.

We make use of eslint in the Open Sauced project, and it had been part of the Webpack build steps. To reach feature parity on this, we made use of @nabla/vite-plugin-eslint. As mentioned on the plugin's NPM page, it "keeps HMR fast: linting is done asynchronously and doesn't block the transform process."

We make use of the ViteHtml plugin to inject our app version into the page title. Actually, this wasn't part of our original build process, but we like it now!

We make use of the ViteInspect plugin for development purposes in optimizing Vite. This plugin lets us observe the state of the various Vite plugins.

The ViteLegacy plugin is what we use to target browsers not supporting ES Modules.

The Vite PWA plugin was the one I mentioned in Part 2 - we worked a bit to to get our existing PWA implementation working, and we wound up deciding to transfer to use of this plugin instead.

Proving the use case of supporting the same effective Plugins API as Rollup, we are using @rollup/plugin-replace to inject the Netlify build date into a Footer react component.

For vanity metrics, we use vite-plugin-time-reporter in order to gloat about build times.

In yet another showcase of Rollup plugin compatibility (and this one's my favorite), we are using rollup-plugin-visualizer.

Some of the plugins are loaded unconditionally, and others are loaded based on build context (I'll talk a little more about this in Part 4). Below is a snippet from our vite.config.ts:

config.plugins.push(
  ViteTimeReporter(),
  ViteEslint(),
  ViteInspect(),
  ViteReact({
    fastRefresh: !isTest,
    // Exclude storybook stories
    exclude: /\.stories\.(t|j)sx?$/,
    // Only .jsx files
    include: "**/*.jsx",
    babel: {
      plugins: [
        [
          'babel-plugin-styled-components',
          {
            displayName: true,
            fileName: false
          }
        ]
      ]
    }
  }),
  ViteHtml({
    minify: isProd && isBuild,
    inject: {
      data: {
        title: `Open Sauced v${process.env.npm_package_version}`,
      },
    },
  })
);

And here's a snippet of some code used for conditional application:

isBuild && isLegacy && config.plugins.push(
  ViteLegacy({
    targets: [
      'defaults',
      'not IE 11'
    ]
  })
);

isReport && config.plugins.push(
  ViteVisualizer({
    filename: "./build/bundle.html",
    open: true,
    gzipSize: true
  })
);