vite-tsconfig-paths

What is vite-tsconfig-paths?

The vite-tsconfig-paths npm package is a plugin for Vite that allows users to leverage the paths defined in their tsconfig.json file for module resolution. This means that you can define custom paths for imports in your TypeScript configuration and have them correctly resolved when using Vite as your build tool.

What are vite-tsconfig-paths's main functionalities?

Custom Path Resolution

Allows you to use custom paths defined in tsconfig.json within your Vite project. For example, if you have a path alias '@' pointing to 'src/', you can import modules using this alias.

import { myUtil } from '@/utils/myUtil';

Easy Configuration

The plugin can be easily added to your Vite configuration with a simple import and adding it to the plugins array.

import viteTsconfigPaths from 'vite-tsconfig-paths';

export default {
  plugins: [viteTsconfigPaths()],
};

Other packages similar to vite-tsconfig-paths

tsconfig-paths-webpack-plugin

This is a webpack plugin that allows you to utilize the paths defined in tsconfig.json for module resolution in a webpack project. It serves a similar purpose to vite-tsconfig-paths but is intended for use with webpack instead of Vite.

babel-plugin-module-resolver

This Babel plugin allows you to add new 'root' directories that contain your modules. It also allows you to map a path to another path, similar to the 'paths' option in tsconfig.json, but it is used in conjunction with Babel and not specifically tied to Vite or TypeScript.

aliasify

Aliasify is a Browserify transform for aliasing module paths. While it is not specifically designed for Vite or TypeScript, it provides similar functionality in terms of allowing custom resolution paths for modules in a Browserify setup.

README

vite-tsconfig-paths

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 type { UserConfig } from 'vite'
   import tsconfigPaths from 'vite-tsconfig-paths'
   
   const config: UserConfig = {
       plugins: [
           tsconfigPaths(),
       ],
   }
   
   export default config
   

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

Options

• root: string
  The root directory to load tsconfig.json from.
  Defaults to viteConfig.root

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

 

Donate

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

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