https://github.com/jeddygong/vite-plugin-progress

A progress bar plugin for Vite.
https://github.com/jeddygong/vite-plugin-progress

plugin progress progress-bar vite

Last synced: 3 months ago
JSON representation

A progress bar plugin for Vite.

• Host: GitHub
• URL: https://github.com/jeddygong/vite-plugin-progress
• Owner: jeddygong
• License: mit
• Created: 2022-05-19T09:09:51.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-09-25T10:50:35.000Z (over 1 year ago)
• Last Synced: 2024-10-01T11:40:29.130Z (4 months ago)
• Topics: plugin, progress, progress-bar, vite
• Language: TypeScript
• Homepage:
• Size: 281 KB
• Stars: 205
• Watchers: 1
• Forks: 18
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vite-plugin-progress

Display with progress bar when building

[![NPM version](https://img.shields.io/npm/v/vite-plugin-progress.svg)](https://npmjs.org/package/vite-plugin-progress)

[![NPM version](https://badgen.net/npm/dt/vite-plugin-progress)](https://www.npmjs.com/package/vite-plugin-progress)

[![NPM Downloads](https://img.shields.io/github/license/jeddygong/vite-plugin-progress)](https://npmjs.org/package/vite-plugin-progress)

[![awesome-vite](https://awesome.re/badge.svg)](https://github.com/vitejs/awesome-vite)

**English | [简体中文](https://github.com/jeddygong/vite-plugin-progress/blob/main/README.zh-CN.md)**



  



## 📦 Install

```

# npm

npm i vite-plugin-progress -D 

# yarn 

yarn add vite-plugin-progress -D

# pnpm 

pnpm i vite-plugin-progress -D

```

## 🦄 Usage

Add `progress` plugin to `vite.config.js / vite.config.ts` and configure it:

```ts

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

import progress from 'vite-plugin-progress'

export default {

  plugins: [

    progress()

  ]

}

```

> Tip: During the first build, `transforms` and `chunks` are not displayed.

## Options

Accepts almost all of the same options as [node-progress](https://github.com/tj/node-progress#options).

- `format` the format of the progress bar

- `width` the displayed width of the progress bar defaulting to total

- `complete` completion character defaulting to "\u2588"

- `incomplete` incomplete character defaulting to "\u2591"

- `renderThrottle` minimum time between updates in milliseconds defaulting to 16

- `clear` option to clear the bar on completion defaulting to false

- `callback` optional function to call when the progress bar completes

- `stream` the output stream defaulting to stderr

- `head` head character defaulting to complete character

- `srcDir` the directory of the assets being built defaulting to "src"

The `format` option accepts the following tokens:

- `:bar` the progress bar itself

- `:current` current tick number

- `:total` total ticks

- `:elapsed` time elapsed in seconds

- `:percent` completion percentage

- `:eta` estimated completion time in seconds

- `:rate` rate of ticks per second

Use [picocolors](https://github.com/alexeyraspopov/picocolors) to sprinkle on a few colors.

## Configure options

```ts

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

import progress from 'vite-plugin-progress'

export default {

  plugins: [

    progress({

        format: 'building [:bar] :percent',

        total: 200,

        width: 60,

        complete: '=',

        incomplete: '',

    })

  ]

}

```

```ts

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

import progress from 'vite-plugin-progress'

import colors from 'picocolors'

export default {

  plugins: [

    progress({

        format:  `${colors.green(colors.bold('Bouilding'))} ${colors.cyan('[:bar]')} :percent`

    })

  ]

}

```

## Thanks

This project is inspired [progress-bar-webpack-plugin](https://github.com/clessg/progress-bar-webpack-plugin)

## License

[MIT](./LICENSE)