Automatically migrate Webpack project to Vite

webpack-to-vite.sh

#!/bin/bash

# Ensure we're working on the latest version of the main branch
git switch main
git fetch
git pull

# Create a new branch
git switch -c vite

# Set logFilters to avoid Yarn warnings
yarn config set logFilters --json '[{"code":"YN0076","level":"discard"}]'

# Define functions
add_vite_config() {
  # Add Vite config
echo "import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  base: './',
  plugins: [react()],
});" > vite.config.js
}

add_vite_scripts() {
  # Add Vite scripts
  npm pkg set scripts.build="vite build"
  npm pkg set scripts.dev="vite"
  npm pkg set scripts.preview="vite preview"
}

add_script_tag() {
  # Add <script type="module" src="./index.jsx"></script> to index.html
  sed -i '' 's/<\/body>/  <script type="module" src=".\/index.jsx"><\/script>\n  <\/body>/' index.html
}

# Migrate

### SAMPLE ###

if [ -d "sample" ]; then
  # Change directory to /sample
  cd sample

  # Remove Babel and Webpack files
  rm -rf .babelrc webpack.config.js
  yarn remove @babel/core @babel/preset-env @babel/preset-react babel-loader css-loader html-webpack-plugin style-loader webpack webpack-cli webpack-dev-server

  # Add Vite files
  yarn add "@vitejs/plugin-react@^3.0.0" "vite@^4.0.0" --dev

  # Dedupe dependencies
  yarn dedupe

  # Add Vite config
  add_vite_config

  # Add Vite scripts
  add_vite_scripts

  npm pkg delete resolutions

  # Add <script type="module" src="./index.jsx"></script> to index.html
  add_script_tag

  # Return to root directory
  cd ../
fi


### TEST ###

if [ -d "test" ]; then
  # Go to Test directory
  cd test

  # Remove Babel and Webpack files
  rm -rf .babelrc webpack.config.js
  yarn remove @babel/core @babel/preset-env @babel/preset-react @pmmmwh/react-refresh-webpack-plugin babel-loader css-loader html-webpack-plugin mini-css-extract-plugin react-refresh style-loader webpack webpack-cli webpack-dev-server
  yarn remove @babel/preset-typescript

  # Add Vite files
  yarn add "@vitejs/plugin-react@^3.0.0" "vite@^4.0.0" --dev

  # Dedupe dependencies
  yarn dedupe

  # Add Vite config
  add_vite_config

  # Add Vite scripts
  add_vite_scripts

  npm pkg delete resolutions

  # Add <script type="module" src="./index.jsx"></script> to index.html
  add_script_tag

  # Return to root directory
  cd ../
fi

# Commit all updates
git add .
git commit -m "Migrate from Webpack to Vite"

# Push changes to remote
git push

gh pr create --title "Migrate from Webpack to Vite" --body ""