Search code examples
vue.jsvuejs2vuejs3viterollupjs

Can Vite/Rollup be configured to only run vue-tsc on dependencies that are included by entrypoints?


I have a Vue 2 project that I am in the process of upgrading to Vue 3. Because the Vue CLI is end of life, I have decided to migrate to Vite. There were a lot of breaking changes, so pretty much every file in my /src folder needs some degree of refactoring.

I would like to work on one section at a time, and I do not want vue-tsc to try transpiling any code that is not a dependency of any output files. Presently, it's trying to transpile EVERY .ts and .vue file in my /src folder. Is there a way to configure my project to work the way I am describing?

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  build: {
    outDir:'../wwwroot/dist',
    rollupOptions: {
      input: { 
        cards: fileURLToPath(new URL('./src/pages/cards/cards.ts', import.meta.url)),

      },
      output: {
        entryFileNames: `[name].js`,
        chunkFileNames: `chunks/[name].js`,
        assetFileNames: `assets/[name].[ext]`
      }      
    },
  },  
})

Solution

  • My question is a bit of a misnomer because while the error is emitted from running the scripts Vite build process, it's vue-tsc that causes it.

    My scripts section of package.json looks like this:

    "dev": "vite",
    "build": "run-p type-check build-only",
    "watch": "vite build --watch",
    "preview": "vite preview",
    "build-only": "vite build --emptyOutDir",
    "type-check": "vue-tsc --noEmit",
    

    As part of the build process, vue-tsc (Vue's ts compiler for SFCs) runs. It picks up everything, even files that are not used in the project. So just using the build-onlycommand runs the build and skips the type checking.