npmpackage.info

vite-plugin-html

A vite plugin for processing html. It is developed based on lodash template

3.2.2

605

MIT

TypeScript

346.26 kB

23,987,021 2.8

Installations

npm install vite-plugin-html

Score

55.1

Supply Chain

54.9

Quality

76.7

Maintenance

100

Vulnerability

98.6

License

Pull Requests

Open

17

Total

44

Closed

11

Merged

16

Issues

Open

71

Total

118

Closed

47

Releases

release

v3.0.7

Published on 29 Oct 2023

v3.0.6

Published on 10 Feb 2022

v3.0.0

Published on 27 Jan 2022

v2.0.6

Published on 05 Apr 2021

v2.0.3

Published on 02 Mar 2021

v2.0.2

Published on 23 Feb 2021

View all 6 releases

Developer

vbenjs

Developer Guide

BETA

Module System

CommonJS, ESM

Min. Node Version

Typescript Support

Yes

Node Version

16.20.2

NPM Version

8.19.4 Statistics

605 Stars

82 Commits

96 Forks

6 Watching

2 Branches

16 Contributors

Updated on 29 Nov 2024

Bundle Size

1.14 MB

Minified

346.26 kB

Minified + Gzipped

Bundlephobia

Languages

TypeScript (85.35%)

HTML (7.18%)

JavaScript (3.96%)

Shell (1.85%)

Vue (1.66%)

Total Downloads

Cumulative downloads

Total Downloads

23,987,021

Last day

-24.7%

40,814

Compared to previous day

Last week

-8.5%

245,890

Compared to previous week

Last month

-1.7%

1,123,446

Compared to previous month

Last year

50.3%

12,453,574

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

vite-plugin-html

English | 中文

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

1yarn add vite-plugin-html -D

或

1npm i vite-plugin-html -D

Usage

Add EJS tags to index.html, e.g.

1<head>
2  <meta charset="UTF-8" />
3  <link rel="icon" href="/favicon.ico" />
4  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
5  <title><%- title %></title>
6  <%- injectScript %>
7</head>

Configure in vite.config.ts, this method can introduce the required functions as needed

1import { defineConfig, Plugin } from 'vite'
2import vue from '@vitejs/plugin-vue'
3
4import { createHtmlPlugin } from 'vite-plugin-html'
5
6export default defineConfig({
7  plugins: [
8    vue(),
9    createHtmlPlugin({
10      minify: true,
11      /**
12       * After writing entry here, you will not need to add script tags in `index.html`, the original tags need to be deleted
13       * @default src/main.ts
14       */
15      entry: 'src/main.ts',
16      /**
17       * If you want to store `index.html` in the specified folder, you can modify it, otherwise no configuration is required
18       * @default index.html
19       */
20      template: 'public/index.html',
21
22      /**
23       * Data that needs to be injected into the index.html ejs template
24       */
25      inject: {
26        data: {
27          title: 'index',
28          injectScript: `<script src="./inject.js"></script>`,
29        },
30        tags: [
31          {
32            injectTo: 'body-prepend',
33            tag: 'div',
34            attrs: {
35              id: 'tag',
36            },
37          },
38        ],
39      },
40    }),
41  ],
42})

Multi-page application configuration

1import { defineConfig } from 'vite'
2import { createHtmlPlugin } from 'vite-plugin-html'
3
4export default defineConfig({
5  plugins: [
6    createHtmlPlugin({
7      minify: true,
8      pages: [
9        {
10          entry: 'src/main.ts',
11          filename: 'index.html',
12          template: 'public/index.html',
13          injectOptions: {
14            data: {
15              title: 'index',
16              injectScript: `<script src="./inject.js"></script>`,
17            },
18            tags: [
19              {
20                injectTo: 'body-prepend',
21                tag: 'div',
22                attrs: {
23                  id: 'tag1',
24                },
25              },
26            ],
27          },
28        },
29        {
30          entry: 'src/other-main.ts',
31          filename: 'other.html',
32          template: 'public/other.html',
33          injectOptions: {
34            data: {
35              title: 'other page',
36              injectScript: `<script src="./inject.js"></script>`,
37            },
38            tags: [
39              {
40                injectTo: 'body-prepend',
41                tag: 'div',
42                attrs: {
43                  id: 'tag2',
44                },
45              },
46            ],
47          },
48        },
49      ],
50    }),
51  ],
52})

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<string, any>`	-	injected data
ejsOptions	`EJSOptions`	-	ejs configuration OptionsEJSOptions
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

1    collapseWhitespace: true,
2    keepClosingSlash: true,
3    removeComments: true,
4    removeRedundantAttributes: true,
5    removeScriptTypeAttributes: true,
6    removeStyleLinkTypeAttributes: true,
7    useShortDoctype: true,
8    minifyCSS: true,

Run the playground

1pnpm install
2
3# spa
4cd ./packages/playground/basic
5
6pnpm run dev
7
8# map
9cd ./packages/playground/mpa
10
11pnpm run dev
12

Example project

Vben Admin

License

MIT

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

3

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Fuzzing

Determines if the project uses fuzzing.

0

Security-Policy

Determines if the project has published a security policy.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

2.8

/10

Last Scanned on 2024-11-25

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to vite-plugin-html

vite-plugin-html-env

1.2.8

A vite plugin for rewriting html

vite-plugin-html-config

2.0.2

a vite html config for script,meta,link and more..

vite-plugin-html-inject

1.1.2

Split your index.html into multiple files and inject them where ever you want!

vite-plugin-html-template

1.2.2

html template for vite

vite-plugin-html

Installations

Score

Pull Requests

17

44

11

16

Issues

71

118

47

Releases

Developer

vbenjs

Developer Guide

CommonJS, ESM

Yes

16.20.2

8.19.4

Statistics

Bundle Size

1.14 MB

346.26 kB

Languages

Total Downloads

23,987,021

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

vite-plugin-html

Features

Install (yarn or npm)

Usage

Parameter Description

UserOptions

InjectOptions

Env inject

PageOption

MinifyOptions

Run the playground

Example project

License

10

10

10

3

0

0

0

0

0

0

0

0

0

2.8

/10

Other packages similar to vite-plugin-html