npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@fwouts/vite-tsconfig-paths

v4.2.1

Published

Vite resolver for TypeScript compilerOptions.paths

Downloads

6,717

Readme

👋 Do you like Postgres 🐘? I'm making a 100% type-safe query builder (not an ORM), and I want your help fleshing it out.
Btw, it generates the types and client from your database schema, so it's never out-of-date and you have access to every native Postgres function!
I want to add a powerful plugin system soon, and eventually all functionality will be pluggable.

Learn more


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 search for tsconfig.json files.

    The default value of this option depends on whether projects is defined. If it is, then the Vite project root is used. Otherwise, Vite's searchForWorkspaceRoot function is used.

  • projects: string[]
    If you have an esoteric setup, you might need this option to specify where your tsconfig files are located. The paths within are relative to the root option.

    If defined, the root directory won't be searched for tsconfig files. You should always try using just the root option first, because this option is more brittle.

  • loose: boolean
    Disable strictness that limits path resolution to TypeScript and JavaScript importers.

    Useful if you want imports in Vue templates to be resolved, but don't want to use allowJs in your tsconfig, for example.

    In other words, when loose: true is used, any file that gets transpiled into JavaScript will have its imports resolved by this plugin.

  • parseNative: boolean
    Enable use of the tsconfck.parseNative function, which delegates the loading of tsconfig files to the TypeScript compiler. You'll probably never need this, but I added it just in case.

    ⚠️ This option can slow down Vite's startup time by as much as 600ms, due to the size of the TypeScript compiler. Only use it when necessary.

  • ignoreConfigErrors: boolean
    When true, parsing errors encountered while loading tsconfig files will be ignored. This is useful if you have a monorepo with multiple tsconfig files, and you don't want to see errors for the ones that aren't relevant to the current project.

 

allowJs

If your tsconfig file has "allowJs": true in it, path resolution will be expanded beyond TypeScript importers. 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 tsconfig 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

Also, check out the Troubleshooting wiki page for more guidance.