npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@janff/html-bundle

v0.0.6

Published

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

Downloads

10

Readme

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>