Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/subwaytime/vite-aliases

Alias auto generation for Vite
https://github.com/subwaytime/vite-aliases

typescript vite vite-aliases vite-plugin vue3

Last synced: about 2 months ago
JSON representation

Alias auto generation for Vite

Host: GitHub
URL: https://github.com/subwaytime/vite-aliases
Owner: Subwaytime
License: mit
Created: 2020-11-04T21:49:09.000Z (almost 4 years ago)
Default Branch: main
Last Pushed: 2024-05-29T12:52:37.000Z (4 months ago)
Last Synced: 2024-07-19T04:18:38.368Z (about 2 months ago)
Topics: typescript, vite, vite-aliases, vite-plugin, vue3
Language: TypeScript
Homepage: https://www.npmjs.com/package/vite-aliases
Size: 404 KB
Stars: 206
Watchers: 2
Forks: 12
Open Issues: 8
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE

Awesome Lists containing this project

fucking-awesome-vite - vite-aliases - Alias auto-generation based on project structure. (Plugins / Framework-agnostic Plugins)
awesome-vite - vite-aliases - Alias auto-generation based on project structure. (Plugins / Framework-agnostic Plugins)

README

vite-aliases

Alias auto generation for Vite 5

## Usage

Install

```bash
npm i vite-aliases -D
```

Add it to `vite.config.js`

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

export default {
plugins: [
ViteAliases()
]
};

```

Add this to `package.json` (Plugin is only available for ESM)
```json
{
"type": "module"
}
```

That's it!

Based on your Folderstructure, it will now automatically generate all needed aliases.

You can configure it to any desired Depth, 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:

```ts
[
{
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:

```ts
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](https://github.com/brattonross) and [@antfu](https://github.com/antfu),
due to this tiny library beeing inspired by both projects:

[vite-plugin-voie](https://github.com/vamplate/vite-plugin-voie)

[unplugin-vue-components](https://github.com/antfu/unplugin-vue-components).

## License