JSPM

  • Created
  • Published
  • Downloads 183282
  • Score
    100M100P100Q156697F
  • License MIT

A plugin for vite to Minimize index.html and use lodash.template template syntax in index.html

Package Exports

  • vite-plugin-html

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vite-plugin-html) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vite-plugin-html

A simple vite plugin. It is developed based on lodash template

Getting Started

Install (yarn or npm)

node version: >=12.0.0

vite version: >=1.0.0.rc8

yarn add vite-plugin-html -D or npm i vite-plugin-html -D

Run Example

cd ./examples

yarn install

yarn serve

Usage

  • Config plugin in vite.config.ts
import VitePluginHtml from 'vite-plugin-html';

export default {
  plugins: [
    VitePluginHtml({
      title: 'Vite App',
      minify: process.env.NODE_ENV === 'production',
      options: {
        injectConfig: '<script src="./a.js"></script>',
      },
    }),
  ],
};

// plugins: [VitePluginHtml(Options)],

Options Description

title

type: string

default:''

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

minify

type: boolean|Options, Options

default: isBuild?true:false .

If it is an object type,Default:

  minifyCSS: true,
  minifyJS: true,
  minifyURLs: true,
  removeAttributeQuotes: true,
  trimCustomFragments: true,
  collapseWhitespace: true,

description: html compression configuration

options

type: {[key:string]:any},

default: {}

description: User-defined configuration variables. You can use viteHtmlPluginOptions.xxx in index.html to get

Html Use lodash.template syntax for template processing

e g

vite.config.ts

import VitePluginHtml from 'vite-plugin-html';

export default {
  plugins: [
    VitePluginHtml({
      options: {
        opt1: '<script src="./a.js"></script>',
        opt2: '<script src="./a.js"></script>',
      },
    }),
  ],
};

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <%= viteHtmlPluginOptions.opt1 %>
  </head>
  <body>
    <%= viteHtmlPluginOptions.opt2 %>
  </body>
</html>

License

MIT