Browser extensions - switching Parcel to Vite

Not that there was anything wrong with Parcel, but I wanted to try out Vite.

So instead of doing it all from scratch, let’s look at how we can migrate from Parcel to Vite.

Note: You can also use this article as a guide on building an extension powered by Vite.

If you want to follow along with the article and try it out, use the following GitHub branch as your starting point.

For those who don’t know Vite yet, it’s a build tool we can use to run a development server, and output builds. It’s very similar to Parcel, and at this point of my research, it comes down to personal preferences to pick.

Cleaning up Parcel permalink

My first process was to clean up the existing Parcel config and related items.

• Remove the following file .parcelrc.
• Then, open the package.json and remove the following lines.

"parcel": "^2.7.0",
"parcel-reporter-static-files-copy": "^1.3.4",

Also, remove all the existing scripts in the package.json file. We’ll come back to add new ones.

Now run an npm i to remove the packages.

At this point, our app is no longer powered by Parcel, but nothing powers it now, so we’ll have to fix it.

Adding Vite permalink

Let’s start by adding the packages we need. As I’m running React, I need the react plugin. This might differ if you use other frameworks.

I also added the new scripts that are needed for Vite.

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vite": "^3.0.4"
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^2.0.0"
  }
}

Note: These are only the changes. Your package.json should have some more lines already.

Now run npm i to install the new dependencies.

This won’t run by default as Vite uses a slightly different approach than Parcel. The first thing we want to change is renaming all our .js files to .jsx. (this is not a must, but easier)

• App.js => App.jsx
• Counter.js => Counter.jsx
• index.js => index.jsx

While doing this, move the index.jsx file inside your src directory. (Don’t forget to change the import inside the new-tab.html file)

Now rename the static folder to public, as Vite uses the public folder in favor of static.

Then we also need to modify our tailwind.config.js file to use .jsx files rather than .js.

/** @type {import('tailwindcss').Config} */
module.exports = {
  - content: ['src/*.js'],
  + content: ['src/*.jsx'],
};

And lastly, we need to define a vite.config.js file at the root of our project. In here, we need to tell Vite it’s a React project. Since we are not using an index.html file, we can also notify Vite that we have a different entry point: new-tab.html.

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      input: {
        app: './new-tab.html',
      },
    },
  },
});

And that’s it. You can now try a new build by running the following command.

npm run build

To test it out, you must follow the steps described in this article, but pick the dist folder to be loaded.

And you are done. You converted the Parcel build to use Vite instead.

You can also find the complete code sample on this GitHub repo.

Thank you for reading, and let’s connect! permalink

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter