# vite-plugin-html-transform
**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:** >=16.18.0
**vite version:** >=4.3.0
```bash
pnpm add vite-plugin-html-transform -D
```
或
```bash
npm i vite-plugin-html-transform -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 } from 'vite'
import vue from '@vitejs/plugin-vue'
import { createHtmlPlugin } from 'vite-plugin-html-transform'
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-transform'
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
```
## License
MIT
[npm-img]: https://img.shields.io/npm/v/vite-plugin-html-transform.svg
[npm-url]: https://npmjs.com/package/vite-plugin-html-transform
[node-img]: https://img.shields.io/node/v/vite-plugin-html-transform.svg
[node-url]: https://nodejs.org/en/about/releases/