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; input: 'src/index.js' output: file: 'dest/js/bundle.js' format: 'iife' plugins: ;
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
= []
- likeopts.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
, wheretemplateStr
is the contents of the custom template (opts.template.path
) andtemplateData
is the result of mergingopts.title
andopts.template.data
with two array properties,scripts
andstyles
.scripts
isopts.moreScripts
with the path to the bundleopts.dir
appended.styles
isopts.moreStyles
withopts.css
appended, if given. this function should call whatever custom templating engine api necessary with the arguments in order to returnfinalHtml
, a string of html that the plugin will save. - .path
string
- path to custom template. iffunc
is not given, the default doT engine will be used. the plugin will inject template strings to handlescripts
andstyles
data if necessary. - [.data]
Object
= {}
- template data object.scripts
andstyles
are reserved and will be overwritten if present.
- .func
- [.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 😈.