@dchicchon/vite-plugin-html-config NPM

vite-plugin-html-config

FORK NOTES: I decided to fork the original repo so that way I could map the html options to multiple html files in my project. This is not compatible with the previous usage of the original repo so please check the usage below to know what was changed

Here is the project where I use this: https://github.com/dchicchon/Polus

ORIGINAL NOTES:

This plugin helps us configure additional html

The plugin is based on vite transformIndexHtml hooks.

If we want to distinguish the environment and introduce resources in index.html, we can use this plugin. stand by, favicon url, metas config, link tag config, style tag config, headScripts config,body script config.

Install

node version: >=12.0.0

vite version: >=2.0.0

yarn add vite-plugin-html-config -D

Options

NEW:

files: an object containing filenames mapped to file options
- title : set your html title
- favicon : html favicon url (href url)
- metas : html meta tag, such as key=xx,value=xxx
- links : html head link tag
- style : html style string
- headScripts : html head script
- preHeadScripts : html script with head prepend
- scripts : html script with body tag

Usage

// vite.config.js. refer to original repo for more docs on usage
import htmlPlugin from 'vite-plugin-html-config'

const files = {
  'index.html': {
      title: "App"
  },
  "popup.html": {
      title: "Popup"
  },
  "options.html": {
      title: "Options Page"
  }
}

module.exports = {
  plugins: [htmlPlugin(htmlPluginOpt)],
}

Example

We can inject different scripts through different environments

such as:script in head,script in body and more.

in config file

// vite.config.js

const headScripts = []

// from app env
const APP_ENV = 'pro'

const BAIDU_KEY = APP_ENV === 'pro' ? '123123' : 'xxxxxx'

if (APP_ENV === 'pro') {
  headScripts.push(
    {
      src: 'https://xxxxxxx/mito.js',
      apikey: '123123123123123',
      crossorigin: 'anonymous',
    },
    {
      src: 'https://bbbbb.js',
    }
  )
}

const htmlPluginOpt = {
  headScripts,
  metas: [
    {
      name: 'keywords',
      content: 'vite html meta keywords',
    },
    {
      name: 'description',
      content: 'vite html meta description',
    },
  ],
  links: [
    {
      rel: 'stylesheet',
      href: './style.css',
    },
    {
      rel: 'modulepreload',
      href: 'https://www.google.com/xxx.js',
    },
  ],
  scripts: [
    `var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?${BAIDU_KEY}";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();`,
  ],
  style: 'body { color: red; };*{ margin: 0px }',
}
module.exports = {
  plugins: [htmlPlugin(htmlPluginOpt)],
}

build index.html

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite React</title>
    <meta name="keywords" content="vite html meta keywords">
    <meta name="description" content="vite html meta description">
    <link rel="stylesheet" href="./style.css">
    <link rel="modulepreload" href="https://www.google.com/xxx.js">
    <style>  body { color: red; };*{ margin: 0px }</style>
    <script src="https://xxxxxxx/mito.js" apikey="123123123123123" crossorigin="anonymous" customTag=""></script>
    <script src="https://bbbbb.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script>var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?123123";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();</script>
  </body>
</html>

other example

https://github.com/saschazar21/jpeg-butcher/blob/main/vite.config.ts#L30

@everything-registry/sub-chunk-227

12 months ago

1 year ago

1 year ago

1 year ago