Skip to content

Commit 511b531

Browse files
anncwbanncwb
committed
chore: update readme.md
1 parent 00e6b29 commit 511b531

7 files changed

Lines changed: 270 additions & 51 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +0,0 @@
1-
# 1.0.0-beta.1 (2020-10-27)
2-
3-
4-

‎README.md‎

Lines changed: 61 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,20 @@
11
# vite-plugin-html
22

3-
A simple vite plugin. It is developed based on lodash template
3+
**English** | [中文](./README.zh_CN.md)
44

5-
## Getting Started
5+
[![npm][npm-img]][npm-url] [![node][node-img]][node-url]
6+
7+
A vite plugin for processing html. It is developed based on lodash template
68

79
### Install (yarn or npm)
810

911
**node version:** >=12.0.0
1012

11-
**vite version:** >=2.0.0-beta.3
13+
**vite version:** >=2.0.0-beta.4
14+
15+
`yarn add vite-plugin-html@next -D` or `npm i vite-plugin-html@next -D`
1216

13-
`yarn add vite-plugin-html -D` or `npm i vite-plugin-html -D`
17+
### Example
1418

1519
**Run Example**
1620

@@ -29,21 +33,35 @@ yarn serve
2933
- Config plugin in vite.config.ts
3034

3135
```ts
32-
import VitePluginHtml from 'vite-plugin-html';
33-
34-
export default {
35-
plugins: [
36-
VitePluginHtml({
37-
title: 'Vite App',
38-
minify: process.env.NODE_ENV === 'production',
39-
options: {
40-
injectConfig: '<script src="./a.js"></script>',
41-
},
42-
}),
43-
],
36+
import { UserConfigExport, ConfigEnv } from 'vite';
37+
import vue from '@vitejs/plugin-vue';
38+
39+
import html from 'vite-plugin-html';
40+
41+
export default ({ command, mode }: ConfigEnv): UserConfigExport => {
42+
return {
43+
plugins: [
44+
vue(),
45+
html({
46+
title: 'Vite App',
47+
minify: command === 'build',
48+
options: {
49+
injectConfig: '<script src="./a.js"></script>',
50+
},
51+
tags: [
52+
{
53+
tag: 'div',
54+
attrs: {
55+
src: './',
56+
},
57+
children: 'content',
58+
injectTo: 'body',
59+
},
60+
],
61+
}),
62+
],
63+
};
4464
};
45-
46-
// plugins: [VitePluginHtml(Options)],
4765
```
4866

4967
### Options Description
@@ -52,15 +70,15 @@ export default {
5270

5371
type: `string`
5472

55-
default:''
73+
default: ''
5674

5775
description: The content of the title tag of the index.html tag
5876

5977
**minify**
6078

6179
type: `boolean|Options`, [Options](https://github.com/terser/html-minifier-terser#options-quick-reference)
6280

63-
default: `isBuild?true:false` .
81+
default: `command === 'build'` .
6482

6583
If it is an object type，Default:
6684

@@ -78,7 +96,7 @@ description: html compression configuration
7896

7997
**options**
8098

81-
type: `{[key:string]:any}`,
99+
type: `Record<string,any>`,
82100

83101
default: `{}`
84102

@@ -109,17 +127,23 @@ e.g
109127
**vite.config.ts**
110128

111129
```ts
112-
import VitePluginHtml from 'vite-plugin-html';
113-
114-
export default {
115-
plugins: [
116-
VitePluginHtml({
117-
options: {
118-
opt1: '<script src="./a.js"></script>',
119-
opt2: '<script src="./a.js"></script>',
120-
},
121-
}),
122-
],
130+
import { UserConfigExport, ConfigEnv } from 'vite';
131+
import vue from '@vitejs/plugin-vue';
132+
133+
import html from 'vite-plugin-html';
134+
135+
export default ({ command, mode }: ConfigEnv): UserConfigExport => {
136+
return {
137+
plugins: [
138+
vue(),
139+
html({
140+
options: {
141+
opt1: '<script src="./a.js"></script>',
142+
opt2: '<script src="./a.js"></script>',
143+
},
144+
}),
145+
],
146+
};
123147
};
124148
```
125149

@@ -140,3 +164,8 @@ export default {
140164
## License
141165

142166
MIT
167+
168+
[npm-img]: https://img.shields.io/npm/v/vite-plugin-html.svg
169+
[npm-url]: https://npmjs.com/package/vite-plugin-html
170+
[node-img]: https://img.shields.io/node/v/vite-plugin-html.svg
171+
[node-url]: https://nodejs.org/en/about/releases/

‎README.zh_CN.md‎

Lines changed: 171 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
# vite-plugin-html
2+
3+
**中文** | [English](./README.md)
4+
5+
[![npm][npm-img]][npm-url] [![node][node-img]][node-url]
6+
7+
一个处理 HTML 的 Vite 插件。它基于 lodash 模板开发
8+
9+
### 安装 (yarn or npm)
10+
11+
**node version:** >=12.0.0
12+
13+
**vite version:** >=2.0.0-beta.4
14+
15+
`yarn add vite-plugin-html@next -D` or `npm i vite-plugin-html@next -D`
16+
17+
### 示例
18+
19+
**运行示例**
20+
21+
```bash
22+
23+
cd ./examples
24+
25+
yarn install
26+
27+
yarn serve
28+
29+
```
30+
31+
## 使用
32+
33+
- `vite.config.ts` 中的配置插件
34+
35+
```ts
36+
import { UserConfigExport, ConfigEnv } from 'vite';
37+
import vue from '@vitejs/plugin-vue';
38+
39+
import html from 'vite-plugin-html';
40+
41+
export default ({ command, mode }: ConfigEnv): UserConfigExport => {
42+
return {
43+
plugins: [
44+
vue(),
45+
html({
46+
title: 'Vite App',
47+
minify: command === 'build',
48+
options: {
49+
injectConfig: '<script src="./a.js"></script>',
50+
},
51+
tags: [
52+
{
53+
tag: 'div',
54+
attrs: {
55+
src: './',
56+
},
57+
children: 'content',
58+
injectTo: 'body',
59+
},
60+
],
61+
}),
62+
],
63+
};
64+
};
65+
```
66+
67+
### 选项说明
68+
69+
**title**
70+
71+
type: `string`
72+
73+
default: ''
74+
75+
description: `index.html`内`title`标签内容
76+
77+
**minify**
78+
79+
type: `boolean|Options`, [Options](https://github.com/terser/html-minifier-terser#options-quick-reference)
80+
81+
default: `command === 'build'` .
82+
83+
如果是对象类型，则默认以下配置，可以覆盖
84+
85+
```ts
86+
minifyCSS: true,
87+
minifyJS: true,
88+
minifyURLs: true,
89+
removeAttributeQuotes: true,
90+
trimCustomFragments: true,
91+
collapseWhitespace: true,
92+
93+
```
94+
95+
description: html 压缩配置
96+
97+
**options**
98+
99+
type: `Record<string,any>`,
100+
101+
default: `{}`
102+
103+
description: 用户定义的配置变量。您可以在 index.html 中使用`viteHtmlPluginOptions.xxx`来获取
104+
105+
HTML 使用[lodash.template](https://lodash.com/docs/4.17.15#template)语法进行模板处理
106+
107+
**tags**
108+
109+
type: HtmlTagDescriptor[]
110+
111+
```ts
112+
interface HtmlTagDescriptor {
113+
tag: string;
114+
attrs?: Record<string, string>;
115+
children?: string | HtmlTagDescriptor[];
116+
/**
117+
* default: 'head-prepend'
118+
*/
119+
injectTo?: 'head' | 'body' | 'head-prepend';
120+
}
121+
```
122+
123+
description：要插入到现有 HTML 的标记描述符对象（{tag，attrs，children}）的数组。每个标签还可以指定应将标签注入到何处（默认情况是在前面添加<head>）。
124+
125+
e.g
126+
127+
**vite.config.ts**
128+
129+
```ts
130+
import { UserConfigExport, ConfigEnv } from 'vite';
131+
import vue from '@vitejs/plugin-vue';
132+
133+
import html from 'vite-plugin-html';
134+
135+
export default ({ command, mode }: ConfigEnv): UserConfigExport => {
136+
return {
137+
plugins: [
138+
vue(),
139+
html({
140+
options: {
141+
opt1: '<script src="./a.js"></script>',
142+
opt2: '<script src="./a.js"></script>',
143+
},
144+
}),
145+
],
146+
};
147+
};
148+
```
149+
150+
**index.html**
151+
152+
```html
153+
<!DOCTYPE html>
154+
<html lang="en">
155+
<head>
156+
<%= viteHtmlPluginOptions.opt1 %>
157+
</head>
158+
<body>
159+
<%= viteHtmlPluginOptions.opt2 %>
160+
</body>
161+
</html>
162+
```
163+
164+
## License
165+
166+
MIT
167+
168+
[npm-img]: https://img.shields.io/npm/v/vite-plugin-html.svg
169+
[npm-url]: https://npmjs.com/package/vite-plugin-html
170+
[node-img]: https://img.shields.io/node/v/vite-plugin-html.svg
171+
[node-url]: https://nodejs.org/en/about/releases/

‎examples/vite.config.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export default ({ command, mode }: ConfigEnv): UserConfigExport => {
99
vue(),
1010
html({
1111
title: 'Vite App',
12-
minify: mode === 'production',
12+
minify: command === 'build',
1313
options: {
1414
injectConfig: '<script src="./a.js"></script>',
1515
},

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vite-plugin-html",
3-
"version": "2.0.0-beta.1",
3+
"version": "2.0.0-beta.2",
44
"description": "A plugin for vite to Minimize index.html and use lodash.template template syntax in index.html",
55
"main": "dist/index.js",
66
"files": [

0 commit comments

Comments
 (0)