@janff/html-bundle NPM

Features

HTML Based
ESBuild
Use for mutiple html(glob input)
Keeping original directory structure
No hash name file but hash query for clearing cache

Installation and Usage

npm install @janff/html-bundle -D

Add a config file or not

// default is ./bundle.config.js

import vuePlugin from 'esbuild-plugin-vue3';

export default {
	input: {
		dir: 'src',
		files: '**/*.html', // glob style
		ignore: 'node_modules/**'

	},
	output: {
		dir: 'dist',
		minify: true,
		assetsDir: 'assets'
	},
	plugins: [ // esbuild plugins here
		vuePlugin()  
	],
	loader: {  // esbuild loaders here
		'.svg': 'text'
	}
}

Then run script in terminal

npx html-bundle --config bundle.config.js

or add to package.json

{
  "scripts": {
    "build": "html-bundle"
  }
}

npm run build

Cli Options

`--config`

Config file path, default is bundle.config.js

`--watch`

watch file change to rebuild

HTML Config

You will have 3 attribute opiton to indicate the js/css file to bundle or not:

`bundle`

file that will be bundle when this attribute is set to script or css link tag;

`bundle-to=filepath`

for inline script or css to bundle to specific path

`bundle-inject`

for extarnal link script or css to be injected in html file

Example

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Html Bundle Example</title>
  <script>
    console.log('Will not be bundle here')
  </script>
  <style>
    [v-cloak] {
      display: none;
    }
  </style>
<!-- content in css/reset.css will be inject ( removing below link and create a style tag) -->
<link rel="stylesheet" href="css/reset.css" bundle-inject>

<link rel="stylesheet" href="css/main.css" bundle>
</head>

<body>
  <div v-cloak id="app">
    <top-header></top-header>
    <div>{{ name }}</div>


  </div>
</body>

</html>
<!-- the following script has no bundle attribute, then it will not be bundled but copy to dist -->
<script src="./js/not-bundle.js"></script>

<script src="js/to-bundle.js" bundle></script>

<!-- content in js/file-to-inline.js will be inject in the below script -->
<script src="js/file-to-inline.js" bundle-inject></script>

<script type="module" bundle-to="js/inline-to-bundle.js">
// content here will be empty and bundle to ./js/inline-to-bundle.js
import TopHeader from './js/header.vue';
import { createApp, h } from "vue/dist/vue.esm-browser.js";

const App = {
  components: { TopHeader },
  data() {
    return {
      name: "111",
      list: [1, 2, 4]
    };
  },
};

createApp(App).mount("#app");
</script>

Example Result

<!DOCTYPE html><html lang="en"><head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Html Bundle Example</title>
  <script>
    console.log('Will not be bundle here')
  </script>
  <style>
    [v-cloak] {
      display: none;
    }
  </style>
<style type="text/css">body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0;outline:none}body,html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:none;width:100%}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}a{text-decoration:none}a:focus,a:active,a{outline:none}a,button,input{-webkit-tap-highlight-color:rgba(255,0,0,0)}a,p,span,i,h1,h2,h3,h4,h5,h6{-webkit-font-smoothing:antialiased}a,img,input{border:none}a,img{-webkit-touch-callout:none}img{width:100%}ul,ol,li{list-style:none}table{border-collapse:collapse;border-spacing:0}input[type=text],input[type=password],select,a{-webkit-appearance:none;appearance:none;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing:border-box}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}em,i,b{font-style:normal}fieldset,img{border:0;object-fit:contain}input,textarea,select{font-size:100%}audio,canvas,video{display:inline-block;display:inline;zoom:1}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:400}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}.clear:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0}.fl{float:left}.fr{float:right}.hide{display:none}input::-moz-placeholder,textarea::-moz-placeholder{color:#949494}input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:#949494}input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color:#949494}.text-hide{font-size:0;line-height:0;text-indent:-9999px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.text-hidden{font-size:0;line-height:0;text-indent:-9999px}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{border-radius:3px;background:#fff0;-webkit-box-shadow:inset 0 0 5px rgba(255,255,255,0)}::-webkit-scrollbar-thumb{border-radius:3px;background:#0000001f;-webkit-box-shadow:inset 0 0 10px rgba(0,0,0,.2)}
</style>
<link rel="stylesheet" href="css/main.css?ixwoqyh0xgi">
<link href="assets/js-to-bundle.css?bIatSW8corc" ref="stylesheet"></head>

<body>
  <div v-cloak="" id="app">
    <top-header></top-header>
    <div>{{ name }}</div>


  </div>



<script src="./js/not-bundle.js"></script>

<script src="js/to-bundle.js?5yownsrfwa0"></script>

<script>(()=>{console.log("suppose to inject into html inline");})();
</script>

<script type="module" src="js/inline-to-bundle.js?zqbhm8psf5u"></script></body></html>

html bundle glob entry static esbuild

@web/parse5-utils chalk chokidar esbuild glob parse5 shell-arguments

2 months ago

2 months ago

2 months ago

2 months ago