From 9c6d7a2bbefabc9e94cadab4f16b978f9ce782e4 Mon Sep 17 00:00:00 2001 From: vben Date: Thu, 27 Jan 2022 14:29:28 +0800 Subject: [PATCH] chore: release 3.0.0 --- README.md | 154 ++++++++++++++--------- README.zh_CN.md | 136 ++++++++++++-------- packages/core/package.json | 2 +- packages/playground/basic/vite.config.ts | 4 - 4 files changed, 181 insertions(+), 115 deletions(-) diff --git a/README.md b/README.md index a6d0ee0..f5d368c 100644 --- a/README.md +++ b/README.md @@ -2,9 +2,13 @@ **English** | [中文](./README.zh_CN.md) -[![npm][npm-img]][npm-url] [![node][node-img]][node-url] +## Features -A Vite plugin for index.html that provides minify and EJS template-based functionality. +- HTML compression capability +- EJS template capability +- Multi-page application support +- Support custom `entry` +- Support custom `template` ## Install (yarn or npm) @@ -16,7 +20,7 @@ A Vite plugin for index.html that provides minify and EJS template-based functio yarn add vite-plugin-html -D ``` -or +或 ```bash npm i vite-plugin-html -D @@ -24,7 +28,7 @@ npm i vite-plugin-html -D ## Usage -- Update your index.html to add some EJS tag +- Add EJS tags to `index.html`, e.g. ```html @@ -36,122 +40,152 @@ npm i vite-plugin-html -D ``` -- Config plugin in vite.config.ts. In this way, the required functions can be introduced as needed +- 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 { minifyHtml, injectHtml } from 'vite-plugin-html' +import { createHtmlPlugin } from 'vite-plugin-html' export default defineConfig({ plugins: [ vue(), - minifyHtml(), - injectHtml([ - { - fileName: 'index.html', - template: './index.html', - options: { - title: 'vite-plugin-html-example', - injectScript: '', + 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: ``, }, }, - ]), + }), ], }) ``` -- If you don’t want to separate, you can directly Import it as a whole +Multi-page application configuration ```ts -import { defineConfig, Plugin } from 'vite' -import vue from '@vitejs/plugin-vue' - -import html from 'vite-plugin-html' +import { defineConfig } from 'vite' +import { createHtmlPlugin } from 'vite-plugin-html' export default defineConfig({ plugins: [ - vue(), - html({ + createHtmlPlugin({ + minify: true, pages: [ { - fileName: 'index.html', - template: './index.html', - options: { - title: 'vite-plugin-html-example', - injectScript: '', + entry: 'src/main.ts', + filename: 'index.html', + template: 'public/index.html', + injectOptions: { + data: { + title: 'index', + injectScript: ``, + }, + }, + }, + { + entry: 'src/other-main.ts', + filename: 'other.html', + template: 'public/other.html', + injectOptions: { + data: { + title: 'other page', + injectScript: ``, + }, }, }, ], - minify: true, }), ], }) ``` -## injectHtml Parameter Description +## Parameter Description -The content of the `.env` file will be injected into index.html by default, similar to the `loadEnv` function of vite +`createHtmlPlugin(options: UserOptions)` -`injectHtml(Pages: PageOption[])` +### UserOptions -### PageOption +| 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 | -| --------- | --------------- | ------- | ------------------------------ | --- | -| fileName | `string` | - | the file to write the HTML to. | | -| template | `string` | - | relative path to the template. | -| options | `InjectOptions` | - | inject to the HTML | +| Parameter | Types | Default | Description | +| ---------- | --------------------- | ------- | ------------------------------------------------------------------------- | +| data | `Record` | - | injected data | +| ejsOptions | `EJSOptions` | - | ejs configuration Options[EJSOptions](https://github.com/mde/ejs#options) | -### options +`data` can be accessed in `html` using the `ejs` template syntax -| Parameter | Types | Default | Description | -| ---------- | --------------------- | ------- | ----------------------------------------------------------------------- | -| data | `Record` | - | Injected data | -| ejsOptions | `EJSOptions` | - | ejs configuration items[EJSOptions](https://github.com/mde/ejs#options) | +#### Env inject -`data` can be obtained using the `ejs` template syntax in `index.html` +By default, the contents of the `.env` file will be injected into index.html, similar to vite's `loadEnv` function -## minifyHtml Parameter Description +### PageOption -`minifyHtml(MinifyOptions | boolean)`: Default`true` +| 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 - collapseBooleanAttributes: true, collapseWhitespace: true, - minifyCSS: true, - minifyJS: true, - minifyURLs: true, - removeAttributeQuotes: true, - removeComments: true, - removeEmptyAttributes: true, - html5: true, keepClosingSlash: true, + removeComments: true, removeRedundantAttributes: true, removeScriptTypeAttributes: true, removeStyleLinkTypeAttributes: true, useShortDoctype: true, + minifyCSS: true, ``` -## Example - -### Run Example +### Run the playground ```bash -yarn +pnpm install + +# spa +cd ./packages/playground/basic + +pnpm run dev -cd ./packages/playground +# map +cd ./packages/playground/mpa -yarn dev +pnpm run dev ``` -## Sample project +## Example project [Vben Admin](https://github.com/anncwb/vue-vben-admin) diff --git a/README.zh_CN.md b/README.zh_CN.md index 13dba3c..c42651d 100644 --- a/README.zh_CN.md +++ b/README.zh_CN.md @@ -4,7 +4,13 @@ [![npm][npm-img]][npm-url] [![node][node-img]][node-url] -一个针对 index.html，提供压缩和基于 ejs 模板功能的 vite 插件。 +## 功能 + +- HTML 压缩能力 +- EJS 模版能力 +- 多页应用支持 +- 支持自定义`entry` +- 支持自定义`template` ## 安装 (yarn or npm) @@ -42,69 +48,92 @@ npm i vite-plugin-html -D import { defineConfig, Plugin } from 'vite' import vue from '@vitejs/plugin-vue' -import { minifyHtml, injectHtml } from 'vite-plugin-html' +import { createHtmlPlugin } from 'vite-plugin-html' export default defineConfig({ plugins: [ vue(), - minifyHtml(), - injectHtml([ - { - fileName: 'index.html', - template: './index.html', - options: { - title: 'vite-plugin-html-example', - injectScript: '', + createHtmlPlugin({ + minify: true, + /** + * 在这里写entry后，你将不需要在`index.html`内添加 script 标签，原有标签需要删除 + * @default src/main.ts + */ + entry: 'src/main.ts', + /** + * 如果你想将 `index.html`存放在指定文件夹，可以修改它，否则不需要配置 + * @default index.html + */ + template: 'public/index.html', + + /** + * 需要注入 index.html ejs 模版的数据 + */ + inject: { + data: { + title: 'index', + injectScript: ``, }, }, - ]), + }), ], }) ``` -- 如果不想分开，则可以直接整体引入 +多页应用配置 ```ts -import { defineConfig, Plugin } from 'vite' -import vue from '@vitejs/plugin-vue' - -import html from 'vite-plugin-html' +import { defineConfig } from 'vite' +import { createHtmlPlugin } from 'vite-plugin-html' export default defineConfig({ plugins: [ - vue(), - html({ + createHtmlPlugin({ + minify: true, pages: [ { - fileName: 'index.html', - template: './index.html', - options: { - title: 'vite-plugin-html-example', - injectScript: '', + entry: 'src/main.ts', + filename: 'index.html', + template: 'public/index.html', + injectOptions: { + data: { + title: 'index', + injectScript: ``, + }, + }, + }, + { + entry: 'src/other-main.ts', + filename: 'other.html', + template: 'public/other.html', + injectOptions: { + data: { + title: 'other page', + injectScript: ``, + }, }, }, ], - minify: true, }), ], }) ``` -## injectHtml 参数说明 - -默认会向 index.html 注入 `.env` 文件的内容，类似 vite 的 `loadEnv`函数 +## 参数说明 -`injectHtml(Pages: PageOption[])` +`createHtmlPlugin(options: UserOptions)` -### PageOption +### UserOptions -| Parameter | Types | Default | Description | -| --------- | --------------- | ------- | ----------------- | --- | -| fileName | `string` | - | HTML 写入的文件名 | | -| template | `string` | - | 模板的相对路径 | -| options | `InjectOptions` | - | 注入 HTML 的数据 | +| 参数 | 类型 | 默认值 | 说明 | +| -------- | ------------------------ | ------------- | ---------------- | --- | +| entry | `string` | `src/main.ts` | 入口文件 | | +| template | `string` | `index.html` | 模板的相对路径 | +| inject | `InjectOptions` | - | 注入 HTML 的数据 | +| minify | `boolean｜MinifyOptions` | - | 是否压缩 html | +| pages | `PageOption` | - | 多页配置 | -### options +### InjectOptions | 参数 | 类型 | 默认值 | 说明 | | ---------- | --------------------- | ------ | ---------------------------------------------------------- | @@ -113,41 +142,48 @@ export default defineConfig({ `data` 可以在 `html` 中使用 `ejs` 模版语法获取 -## minifyHtml 参数说明 +#### env 注入 -`minifyHtml(MinifyOptions | boolean)`:默认为`true` +默认会向 index.html 注入 `.env` 文件的内容，类似 vite 的 `loadEnv`函数 + +### PageOption + +| 参数 | 类型 | 默认值 | 说明 | +| ------------- | --------------- | ------------- | ---------------- | --- | +| filename | `string` | - | html 文件名 | | +| template | `string` | `index.html` | 模板的相对路径 | +| entry | `string` | `src/main.ts` | 入口文件 | | +| injectOptions | `InjectOptions` | - | 注入 HTML 的数据 | ### MinifyOptions 默认压缩配置 ```ts - collapseBooleanAttributes: true, collapseWhitespace: true, - minifyCSS: true, - minifyJS: true, - minifyURLs: true, - removeAttributeQuotes: true, - removeComments: true, - removeEmptyAttributes: true, - html5: true, keepClosingSlash: true, + removeComments: true, removeRedundantAttributes: true, removeScriptTypeAttributes: true, removeStyleLinkTypeAttributes: true, useShortDoctype: true, + minifyCSS: true, ``` -## 示例 - ### 运行示例 ```bash -yarn +pnpm install + +# spa +cd ./packages/playground/basic + +pnpm run dev -cd ./packages/playground +# map +cd ./packages/playground/mpa -yarn dev +pnpm run dev ``` diff --git a/packages/core/package.json b/packages/core/package.json index 4ed571a..936bf8b 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "vite-plugin-html", - "version": "3.0.0-beta.4", + "version": "3.0.0", "description": "A plugin for vite to Minimize index.html and use lodash.template template syntax in index.html", "main": "dist/index.cjs", "module": "dist/index.mjs", diff --git a/packages/playground/basic/vite.config.ts b/packages/playground/basic/vite.config.ts index 1786201..1f60bc7 100644 --- a/packages/playground/basic/vite.config.ts +++ b/packages/playground/basic/vite.config.ts @@ -1,16 +1,12 @@ import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import { createHtmlPlugin } from 'vite-plugin-html' -// import { resolve } from 'path' export default defineConfig({ plugins: [ vue(), createHtmlPlugin({ minify: true, - /** - * @default src/main.ts - */ entry: 'src/main.ts', /** * @default index.html