vite-plugin-progress

Display with progress bar when building

📦 Install

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:

// 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.

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

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 to sprinkle on a few colors.

Configure options

// 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: '',
    })
  ]
}

// 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

License

MIT

A Vite plugin for projecting your application onto a remote production page during development.

vite-plugin-proxy-page A Vite plugin for developing an SPA in the context of a deployed production page. What's the Problem? It's an increasingly comm

Nov 13, 2022

✅ Vite plugin for validating your environment variables

This Vite plugin allows you to validate your environment variables at build or dev time. This allows your build/dev-server to fail-fast if your setup

Dec 23, 2022

🎉 基于 vite 2.0 + vue 3.0 + vue-router 4.0 + vuex 4.0 + element-plus 的后台管理系统vue3-element-admin

vue3-element-admin 🎉 基于 Vite 2.0 + Vue3.0 + Vue-Router 4.0 + Vuex 4.0 + element-plus 的后台管理系统简介 vue3-element-admin 是一个后台前端解决方案，它基于 vue3 和 element-plu

Nov 28, 2022

Vite template with TypeScript, Chakra UI, Eslint Airbnb, Prettier

Vite + Typescript + ChakraUI = ❤️ This is a vite template that combines several technologies: Vite React TypeScript ChakraUI Eslint with eslint-config

Mar 26, 2022

Integrate Tauri in a Vite project to build cross-platform apps.

vite-plugin-tauri Integrate Tauri in a Vite project to build cross-platform apps Install Make sure to setup your environment for Tauri development. Th

Dec 15, 2022

A template repository / quick start to build Azure Static Web Apps with a Node.js function. It uses Vue.js v3, Vue Router, Vuex, and Vite.js.

Azure Static Web App Template with Node.js API This is a template repository for creating Azure Static Web Apps that comes pre-configured with: Vue.js

Jun 25, 2022

Comments

使用插件就报错，不使用可以正常打包
描述

我在 fighting-design 项目中使用了 vite-plugin-progress，使用插件打包就报错，不使用可以正常打包，报的是路径的错误。

错误截图

复现步骤

clone fighting-design

pnpm i

pnpm i vite-plugin-progress -D

在 vite.config.ts 中添加：

import progress from 'vite-plugin-progress' export default { plugins: [progress()], }

pnpm build

可以发现，使用插件之后打包报错，不使用的话就不会报错
opened by Tyh2001 3
Cannot change `src` directory

Hi there!

I've got an error no such file or directory, stat '/var/www/html/src'. It's true - I have not this directory, but my source files are located in another directory (named resources), so I want to change path to it via config.

I guess, it hard-coded here, so maybe add configuration option like srcDir (will be src by default) or anything like this?

opened by czernika 2