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

mowdown

v2.2.2

Published

Minimal production bundler for html, css, and js

Downloads

40

Readme

This is a super simple, standalone bundler that you don't have to run locally.

It will search given html files, note all local references to css and js files (script and link tags), and will then concatenate and minify them into bundle files. For js, it will babel-transform them too.

So, no need to run a builder every time you make a change and no need to worry about code splitting or tree shaking, just use what html already gives you for including scripts.

NOTICE:

If one of your html files refers to a css script in a CDN, add it to the excludeCss and prependCssUrls lists (see below) because otherwise mowdown currently assumes all css files are local

To use:

First, include a .babelrc file in your root folder. You can copy from the one in this package's repo if you want.

const mowdown = require('mowdown')
mowdown(arrayOfHtmlFiles,outputFolder)

or if the html files are not in the same folder as the assets they refer to, you can do:

const mowdown = require('mowdown')
mowdown(arrayOfHtmlFiles,outputFolder,{sourceFolder:inputFolder})

That third param takes a few other options as well. Here are the defaults and explanations:

const defaults={
  isOverwritingHtml:true, //whether to overwrite the original html files or create a new one in the destination folder
  isUsingBabel:true, //whether to babel-transform the output or not
  sourceFolder:null, //the folder with all the asset files referred to by your html files, if different from the folder containing your html files
  replaceJs:{}, //an object mapping JS script URIs to their desired replacement URIs
  replaceCss:{}, //an object mapping CSS script URIs to their desired replacement URIs
  excludeJs:[], //a list of script sources to not include in the final output
  excludeCss:[], //a list of css script link hrefs to not include in the final output
  prependJsUrls:[], //a list of script URLs to prepend to the final output
  prependCssUrls:[], //a list of css URLs to prepend to the final output (for things you'd get from a cdn for prod but locally for local dev)
  excludeFoldersFromCopy:[], //by default, mowdown copies everything it didn't already touch in the sourcefolder over to the destination folder, just to make sure it got everything needed for the site to run. Use this array of folder paths to exclude folders within the sourcefolder from being copied over
  terserOptions:{} //any terser.js flags you want to use for when the js code is minified (see https://github.com/terser/terser)
}

About excludeFoldersFromCopy option

By default, mowdown copies everything it didn't already touch in the sourcefolder over to the destination folder, just to make sure it got everything needed for the site to run. Use this array of folder paths to exclude folders within the sourcefolder from being copied over