Converting to Vite (Part 3)
Tags: webdev, javascript, vite, tooling
Published: 2022-01-27 15:39:21

In Part 3 of this series, we'll talk about our use of various plugins for [Vite](https://vitejs.dev) on the [Open Sauced project](https://github.com/open-sauced/open-sauced). Vite provides extensibility in the form of a [Plugin API](https://vitejs.dev/guide/api-plugin.html), based on that of [Rollup](https://rollupjs.org/guide/en/). For reference on which Rollup plugins Vite is compatible with (and to what degree), see [Vite Rollup Plugins](https://vite-rollup-plugins.patak.dev/)

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](https://webpack.js.org/) (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.
```typescript
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](https://www.npmjs.com/package/@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](https://www.npmjs.com/package/@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](https://www.npmjs.com/package/vite-plugin-html) 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](https://www.npmjs.com/package/vite-plugin-inspect) plugin for development purposes in optimizing Vite. This plugin lets us observe the state of the various Vite plugins. 

The [ViteLegacy](https://www.npmjs.com/package/@vitejs/plugin-legacy) plugin is what we use to target browsers not supporting ES Modules. 

The [Vite PWA](https://www.npmjs.com/package/vite-plugin-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](https://www.npmjs.com/package/@rollup/plugin-replace) to inject the Netlify build date into a Footer react component.

For vanity metrics, we use [vite-plugin-time-reporter](https://www.npmjs.com/package/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](https://www.npmjs.com/package/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`:
```typescript
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:
```typescript
isBuild && isLegacy && config.plugins.push(
  ViteLegacy({
    targets: [
      'defaults',
      'not IE 11'
    ]
  })
);

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

We'd love to hear in the comments what some of your favorite plugins are for Vite (or Rollup)!

<small><em>Photo by <a href="https://unsplash.com/@nugthan?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Nathan Watson</a> on <a href="https://unsplash.com/s/photos/block-diagram?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a></em></small>