vite-aliases
v0.11.7
Published
Alias auto generation for Vite
Downloads
37,369
Maintainers
Readme
Usage
Install
npm i vite-aliases -D
Add it to vite.config.js
// vite.config.js
import { ViteAliases } from 'vite-aliases'
export default {
plugins: [
ViteAliases()
]
};
Add this to package.json
(Plugin is only available for ESM)
{
"type": "module"
}
That's it!
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'
},
]
Best Practice
vite-aliases
is meant to simply take the first Layer of your folders and turn it into useful Shortcuts.
Therefore i advise you to use the default Configuration and not use folders with the same name, otherwise it will create an Error.
If however you need duplicate Foldernames, enable adjustDuplicates
.
This will turn the entire Filepath of said duplicate into the alias itself, like shown in the Example below.
Example:
`src/components` -> `@components`
`src/pages/components` -> `@pagesComponents`
`src/test/new/partials/components` -> `@testNewPartialsComponents`
and so on..
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
* use `logPath` to change the location
*/
createLog: false,
/**
* Path for Logfile
*/
logPath: 'src/logs',
/**
* Create global project directory alias
*/
createGlobalAlias: true,
/**
* Turns duplicates into camelCased path aliases
*/
adjustDuplicates: false,
/**
* Used paths in JS/TS configs will now be relative to baseUrl
*/
useAbsolute: false,
/**
* Adds seperate index paths
* approach created by @davidohlin
*/
useIndexes: false,
/**
* Generates paths in IDE config file
* works with JS or TS
*/
useConfig: true,
/**
* Override config paths
*/
ovrConfig: false,
/**
* Will generate Paths in tsconfig
* used in combination with `useConfig`
* Typescript will be auto detected
*/
dts: false,
/**
* Disables any terminal output
*/
silent: true,
/**
* Root path of Vite project
*/
root: process.cwd()
});
Thanks
Thanks to @brattonross and @antfu, due to this tiny library beeing inspired by both projects:
License
MIT License © 2020-PRESENT Leon Langer