This post goes over how to migrate from Parcel to Vite.
package.json
Uninstall parcel:
npm uninstall parcel
Install vite:
npm install --save-dev vite
Remove “source” and update npm “scripts”:
{
- "source": "public/index.html",
"scripts": {
- "build": "parcel build",
+ "build": "vite build",
+ "preview": "vite preview",
- "start": "parcel --open"
+ "start": "vite --open"
}
}
Environment Variables
Environment variables need to be prefixed with VITE_. For example:
-GOOGLE_ANALYTICS_ID=abc123
+VITE_GOOGLE_ANALYTICS_ID=abc123
Replace process.env. with import.meta.env.VITE_:
git grep -l 'process.env.' | xargs sed -i '' -e 's/process.env./import.meta.env.VITE_/g'
Replace process.env.NODE_ENV checks with import.meta.env.DEV. For example:
-if (process.env.NODE_ENV === 'development') {
+if (import.meta.env.DEV) {
If you’re using TypeScript, create a type declaration file:
/// <reference types="vite/client" />
interface ImportMetaEnv {
readonly DEV: boolean;
readonly VITE_GOOGLE_ANALYTICS_ID: string;
}
interface ImportMeta {
readonly env: ImportMetaEnv;
}
index.html
Move index.html to the root:
find . -type f -name index.html -print0 | xargs -0 -I {} mv {} $(git rev-parse --show-toplevel)
Update all scripts, links, and asset paths.
vite.config.mjs
Create a vite.config.mjs if you’re using plugins. For example:
import react from '@vitejs/plugin-react-swc';
import { defineConfig } from 'vite';
export default defineConfig({
plugins: [react()],
});
TypeScript
If you’re getting the error:
error TS2307: Cannot find module './file.png' or its corresponding type declarations.
Then update your type declaration file:
declare module '*.png' {
const src: string;
export default src;
}
Port
Replace localhost:1234 with localhost:5173:
git grep -l 'localhost:1234' | xargs sed -i '' -e 's/localhost:1234/localhost:5173/g'
CI
Update your environment variables with the VITE_ prefix.
If you’re using Parcel’s --public-url option, replace it with Vite’s --base:
git grep -l '\-\-public-url' | xargs sed -i '' -e 's/--public-url/--base/g'
If you’re running a Vite server in CI, then you’ll need to pass the --host option:
npx vite --host