https://github.com/jwyGithub/vite-plugin-auto-alias

automatically generate alias based on path
https://github.com/jwyGithub/vite-plugin-auto-alias

alias vite

Last synced: 2 months ago
JSON representation

automatically generate alias based on path

• Host: GitHub
• URL: https://github.com/jwyGithub/vite-plugin-auto-alias
• Owner: jwyGithub
• License: mit
• Created: 2020-01-16T12:39:55.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2024-03-08T09:18:40.000Z (4 months ago)
• Last Synced: 2024-04-09T12:13:34.756Z (3 months ago)
• Topics: alias, vite
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/vite-plugin-auto-alias
• Size: 1.18 MB
• Stars: 6
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-vite - vite-plugin-auto-alias - Automatically generate alias based on path. (Plugins / Framework-agnostic Plugins)
• awesome-vite - vite-plugin-auto-alias - Automatically generate alias based on path. (Plugins / Framework-agnostic Plugins)
• awesome-vite - vite-plugin-auto-alias - Automatically generate alias based on path. (Plugins / Framework-agnostic Plugins)
• awesome-viter - vite-plugin-auto-alias - Automatically generate alias based on path. (Plugins / Framework-agnostic Plugins)
• awesome-vite - vite-plugin-auto-alias - Automatically generate alias based on path. (Plugins / Framework-agnostic Plugins)
• awesome-vite - vite-plugin-auto-alias - Automatically generate alias based on path. (Plugins / Framework-agnostic Plugins)
• awesome-vite - vite-plugin-auto-alias - Automatically generate alias based on path. (Plugins / Framework-agnostic Plugins)

README

        
English | [简体中文](https://github.com/jwyGithub/vite-plugin-auto-alias/blob/master/README.zh.md)

# vite-plugin-auto-alias

automatically generate alias based on path



  

  

  

  






## Features

-   Support for hot updates

-   Support for custom alias prefixes

-   Supports synchronous mode configuration

## Install

#### pnpm

```sh

pnpm add vite-plugin-auto-alias -D

```

#### yarn

```sh

yarn add vite-plugin-auto-alias -D

```

#### npm

```sh

npm install vite-plugin-auto-alias -D

```

## Use

> vite.config.ts / vite.config.js

```typescript

import autoAlias from 'vite-plugin-auto-alias';

export default defineConfig(({ command, mode }) => {

    return {

        plugins: [autoAlias()]

    };

});

```

## Option

```typescript

export interface AutoAlias {

    /**

     * @description the root directory where the alias needs to be generated is src by default

     * @default src

     */

    root?: string;

    /**

     * @description prefix for generating aliases

     * @default @

     */

    prefix?: string;

    /**

     * @description synchronize the mode of json configuration

     * @default all

     */

    mode?: 'sync' | 'off';

    /**

     * @description alias configuration file path

     * @default tsconfig.json

     */

    aliasPath?: string;

}

```

#### Mode

-   sync : when use `sync`,the plugin will search for `tsconfig.json` or `jsconfig.json` in the root directory of the current project, so please ensure that this file exists in the project. The plugin will automatically generate paths options when running, and then write them to the file without the need for developers to manually add them

> vite.config.ts / vite.config.js

```typescript

import autoAlias from 'vite-plugin-auto-alias';

export default defineConfig(({ command, mode }) => {

    return {

        plugins: [

            autoAlias({

                // ...

                mode: 'sync'

            })

        ]

    };

});

```

> tsconfig.json / jsconfig.json

```json

{

    "compilerOptions": {

        "baseUrl": "./"

        // ...

    }

}

```

## Example

    |-- src

        |-- plugins

        |-- router

        |-- scss

        |-- store

        |-- utils

        |-- views

        |-- ....

```typescript

import xxx from '@plugins/xxx';

import xxx from '@router/xxx';

import xxx from '@scss/xxx';

import xxx from '@store/xxx';

import xxx from '@utils/xxx';

import xxx from '@views/xxx';

....

```