Skip to content

vimcaw/vite-aliases

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

vite-aliases

Alias auto generation for Vite 2

Usage

Read here for current News on Version 0.7.0 --> Subwaytime#18

Install

npm i vite-aliases -D

Add it to vite.config.js

// vite.config.js
import { ViteAliases } from 'vite-aliases'

const aliases = ViteAliases();

export default {
	resolve: {
		alias: aliases
	}
};

That's it!

Based on your Folderstructure, it will now automatically generate all needed aliases. You can configure it to any desired Folderdepth, but it is recommend to stay on the first Level! Furthermore it will use your native OS Filesystem, so it works on Linux, Mac, Windows and other OS.

This Structure:

src
    assets
    components
    pages
    store
    utils

will generate the following:

[
	{
		find: '@',
		replacement: '${your_project_path}/src'
	},
	{
		find: '@assets',
		replacement: '${your_project_path}/src/assets'
	},
	{
		find: '@components',
		replacement: '${your_project_path}/src/components'
	},
	{
		find: '@pages',
		replacement: '${your_project_path}/src/pages'
	},
	{
		find: '@store',
		replacement: '${your_project_path}/src/store'
	},
	{
		find: '@utils',
		replacement: '${your_project_path}/src/utils'
	},
]

Configuration

Current available Options:

ViteAliases({
	/**
	 * Relative path to the project Directory
	 */
	dir: 'src',

	/**
	 * Prefix Symbol for the Aliases
	 */
	prefix: '@',

	/**
	 * Allow Searching for Subdirectories
	 */
	deep: true,

	/**
	 * Search Depthlevel for Subdirectories
	 */
	depth: 1,

	/**
	 * Creates a Logfile in `logs` Folder
	 * Will be relative to project Directory
	 */
	allowLogging: false,

	/**
	 * Allow global project Directory alias
	 */
	allowGlobalAlias: true,

	/**
	 * Ignore Error on Duplicate Folders
	 */
	ignoreDuplicates: false,

	/**
	 * Generates Paths in IDE Config File
	 * Works with JS oder TS
	 * For Typescript: set `useTypescript` true
	 */
	useConfig: false,

	/**
	 * Will generate Paths in tsconfig
	 * Used in Combination with `useConfig`
	 */
	useTypescript: false,

	/**
	 * Root path of Vite project
	 */
	root: process.cwd()
});

Thanks

Thanks to @brattonross and @antfu, due to this tiny Library beeing inspired by both Projects:

vite-plugin-voie

vite-plugin-components.

License

MIT License © 2020-2021 Leon Langer

Packages

No packages published

Languages

  • TypeScript 75.5%
  • Vue 16.6%
  • JavaScript 5.4%
  • HTML 2.5%