@janff/html-bundle

v0.0.6

Published

2 months ago

HTML bundler base on esbuild, support multiply html entry, keeping original directory structure

Downloads

0High
0Medium
0Low

janff_feng

html bundle glob entry static esbuild

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>

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Features

Installation and Usage

Cli Options

--config

--watch