rollup-plugin-static-site

generate html out of thin air (or with any templating engine) for your static site bundle

install

yarn add -D rollup-plugin-static-site

usage

// rollup.config.js
import staticSite from 'rollup-plugin-static-site';
 
export default {
  input: 'src/index.js',
  output: {
    file: 'dest/js/bundle.js',
    format: 'iife',
  },
  plugins: [
    staticSite({ dir: 'dest' }),
  ]
};

running rollup -c with the above config will create static files in dest. the output html will be in dest/index.html and will have a script tag pointing to the rollup bundle.

options

opts Object - plugin options

• .dir string - path to output directory containing assets and bundle
• [.css] boolean | string = false - path to css file. typically the value of rollup-plugin-postcss' extract option.
• [.filename] string = "index.html" - filename of the output html
• [.moreScripts] Array.<string> | string = [] - additional scripts that should be injected into the output html, useful for loading libraries via a cdn instead the bundle
• [.moreStyles] Array.<string> | string = [] - like opts.moreScripts, but for css
• [.suffix] boolean | string = false - adds a suffix to the script and css filename
• [.template] Object = {} - custom template options
  • .func function - wrapper function used for custom templating engines. has signature (templateStr, templateData) => finalHtml, where templateStr is the contents of the custom template (opts.template.path) and templateData is the result of merging opts.title and opts.template.data with two array properties, scripts and styles. scripts is opts.moreScripts with the path to the bundle opts.dir appended. styles is opts.moreStyles with opts.css appended, if given. this function should call whatever custom templating engine api necessary with the arguments in order to return finalHtml, a string of html that the plugin will save.
  • .path string - path to custom template. if func is not given, the default doT engine will be used. the plugin will inject template strings to handle scripts and styles data if necessary.
  • [.data] Object = {} - template data object. scripts and styles are reserved and will be overwritten if present.
• [.title] string = "rollup app" - string used for the <title> tag in the output html

test

yarn test # or yarn test:cov 

motivation

i recently got back into making web-based creative coding sketches. for me, this means static html with some client-side js. instead of going with the familiar webpack + html-webpack-plugin, i wanted to try something new, so i went ahead and installed rollup. the rollup wiki led me to rollup-plugin-generate-html-template, which works well for very simple projects, but quickly becomes unusable due to inflexibility. i tried some other html-related plugins with no luck, so i wrote one myself 😈.