vite-tsconfig-paths
    TypeScript icon, indicating that this package has built-in type declarations

    3.5.0 • Public • Published

    vite-tsconfig-paths

    npm codecov Code style: Prettier Donate

    Give vite the ability to resolve imports using TypeScript's path mapping.

    Usage

    1. Install as dev dependency

    2. Inject vite-tsconfig-paths using the vite.config.ts module

      import { defineConfig } from 'vite'
      import tsconfigPaths from 'vite-tsconfig-paths'
      
      export default defineConfig({
        plugins: [tsconfigPaths()],
      })

    Note: You need to restart Vite when you update your paths mappings.

    Options

    • root: string
      The directory to crawl for tsconfig.json files.
      Defaults to viteConfig.root

    • projects: string[]
      An array of tsconfig.json paths (relative to viteConfig.root) and/or directories that contain a tsconfig.json file.
      This overrides the root option.

    • extensions: string[]
      File extensions to search for.
      Defaults to .ts | .tsx | .js | .jsx | .mjs

    • loose: boolean
      Disable strictness that limits path resolution to TypeScript and JavaScript modules.
      Useful if you want asset URLs in Vue templates to be resolved.

     

    allowJs

    If your tsconfig.json file has "allowJs": true in it, path resolution will be expanded beyond TypeScript modules. The following extensions will have their imports resolved by this plugin: .vue, .svelte, .mdx, .mjs, .js, .jsx

     

    baseUrl

    If the baseUrl is defined, it gets prepended to all bare imports, and its resolution will take precedence over node_modules. This is also how TypeScript does it.

    Say the baseUrl is ../root and you import react. This plugin will use ../root/react if it exists. If not found, then react is resolved normally. The baseUrl is relative to the project root (where tsconfig.json lives).

     

    include/exclude

    The include and exclude compiler options are respected.

    Internally, globrex is used for glob matching.

     

    Troubleshooting

    The DEBUG environment variable can be used to figure out why this plugin isn't working as you may have expected.

    DEBUG=vite-tsconfig-paths yarn vite

     

    Donate

    If this package helps you, please donate! Any amount is greatly appreciated. 🥰

    • ETH: 0xa446626195bbe4d0697e729c1433a86fB6Cf66cF
    • BTC: 17vYtAUPKXzubMEnNcN8SiuFgicrd5Rp9A
    • KIN: GBU7RDRD7VDVT254RR6PGMBJESXQVDHJ5CGGODZKRXM2P4MP3G5QSAMH

    Install

    npm i vite-tsconfig-paths

    DownloadsWeekly Downloads

    166,857

    Version

    3.5.0

    License

    MIT

    Unpacked Size

    58 kB

    Total Files

    12

    Last publish

    Collaborators

    • aleclarson