Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/anncwb/vite-plugin-html
A vite plugin for processing html. It is developed based on lodash template
https://github.com/anncwb/vite-plugin-html
Last synced: about 1 month ago
JSON representation
A vite plugin for processing html. It is developed based on lodash template
- Host: GitHub
- URL: https://github.com/anncwb/vite-plugin-html
- Owner: vbenjs
- License: mit
- Created: 2020-10-27T05:32:11.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-05-29T19:26:32.000Z (4 months ago)
- Last Synced: 2024-06-16T00:16:36.385Z (3 months ago)
- Language: TypeScript
- Homepage:
- Size: 492 KB
- Stars: 546
- Watchers: 7
- Forks: 92
- Open Issues: 79
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-vite - vite-plugin-html - Plugin to minimize and use ejs template syntax in `index.html`. (Plugins / Framework-agnostic Plugins)
- awesome-vite - vite-plugin-html - Plugin to minimize and use ejs template syntax in `index.html`. (Plugins / Framework-agnostic Plugins)
README
# vite-plugin-html
**English** | [中文](./README.zh_CN.md)
## Features
- HTML compression capability
- EJS template capability
- Multi-page application support
- Support custom `entry`
- Support custom `template`
## Install (yarn or npm)
**node version:** >=12.0.0
**vite version:** >=2.0.0
```bash
yarn add vite-plugin-html -D
```
或
```bash
npm i vite-plugin-html -D
```
## Usage
- Add EJS tags to `index.html`, e.g.
```html
<%- title %>
<%- injectScript %>
```
- Configure in `vite.config.ts`, this method can introduce the required functions as needed
```ts
import { defineConfig, Plugin } from 'vite'
import vue from '@vitejs/plugin-vue'
import { createHtmlPlugin } from 'vite-plugin-html'
export default defineConfig({
plugins: [
vue(),
createHtmlPlugin({
minify: true,
/**
* After writing entry here, you will not need to add script tags in `index.html`, the original tags need to be deleted
* @default src/main.ts
*/
entry: 'src/main.ts',
/**
* If you want to store `index.html` in the specified folder, you can modify it, otherwise no configuration is required
* @default index.html
*/
template: 'public/index.html',
/**
* Data that needs to be injected into the index.html ejs template
*/
inject: {
data: {
title: 'index',
injectScript: ``,
},
tags: [
{
injectTo: 'body-prepend',
tag: 'div',
attrs: {
id: 'tag',
},
},
],
},
}),
],
})
```
Multi-page application configuration
```ts
import { defineConfig } from 'vite'
import { createHtmlPlugin } from 'vite-plugin-html'
export default defineConfig({
plugins: [
createHtmlPlugin({
minify: true,
pages: [
{
entry: 'src/main.ts',
filename: 'index.html',
template: 'public/index.html',
injectOptions: {
data: {
title: 'index',
injectScript: ``,
},
tags: [
{
injectTo: 'body-prepend',
tag: 'div',
attrs: {
id: 'tag1',
},
},
],
},
},
{
entry: 'src/other-main.ts',
filename: 'other.html',
template: 'public/other.html',
injectOptions: {
data: {
title: 'other page',
injectScript: ``,
},
tags: [
{
injectTo: 'body-prepend',
tag: 'div',
attrs: {
id: 'tag2',
},
},
],
},
},
],
}),
],
})
```
## Parameter Description
`createHtmlPlugin(options: UserOptions)`
### UserOptions
| Parameter | Types | Default | Description |
| --------- | ------------------------ | ------------- | ------------------------------------------------- |
| entry | `string` | `src/main.ts` | entry file path |
| template | `string` | `index.html` | relative path to the template |
| inject | `InjectOptions` | - | Data injected into HTML |
| minify | `boolean｜MinifyOptions` | - | whether to compress html |
| pages | `PageOption` | - | Multi-page configuration |
### InjectOptions
| Parameter | Types | Default | Description |
| ---------- | --------------------- | ------- | ------------------------------------------------------------------------- |
| data | `Record` | - | injected data |
| ejsOptions | `EJSOptions` | - | ejs configuration Options[EJSOptions](https://github.com/mde/ejs#options) |
| tags | `HtmlTagDescriptor` | - | List of tags to inject |
`data` can be accessed in `html` using the `ejs` template syntax
#### Env inject
By default, the contents of the `.env` file will be injected into index.html, similar to vite's `loadEnv` function
### PageOption
| Parameter | Types | Default | Description |
| ------------- | --------------- | ------------- | ----------------------------- |
| filename | `string` | - | html file name |
| template | `string` | `index.html` | relative path to the template |
| entry | `string` | `src/main.ts` | entry file path |
| injectOptions | `InjectOptions` | - | Data injected into HTML |
### MinifyOptions
Default compression configuration
```ts
collapseWhitespace: true,
keepClosingSlash: true,
removeComments: true,
removeRedundantAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true,
useShortDoctype: true,
minifyCSS: true,
```
### Run the playground
```bash
pnpm install
# spa
cd ./packages/playground/basic
pnpm run dev
# map
cd ./packages/playground/mpa
pnpm run dev
```
## Example project
[Vben Admin](https://github.com/anncwb/vue-vben-admin)
## License
MIT
[npm-img]: https://img.shields.io/npm/v/vite-plugin-html.svg
[npm-url]: https://npmjs.com/package/vite-plugin-html
[node-img]: https://img.shields.io/node/v/vite-plugin-html.svg
[node-url]: https://nodejs.org/en/about/releases/