sanand0/rollup-plugin-htmlparts(opens in a new tab)
Language: JavaScript
Loads HTML templates as a module
- stars
- 2
- watchers
- 2
- forks
- 0
- open issues
- 0
- Last updated
- 12/25/2024
Language: JavaScript
Loads HTML templates as a module
This helps you import HTML snippets into JavaScript variables using modules.
Suppose you want this in your index.js:
var heading = '<h1>This is the <em>heading</em></h1>' var body = '<p>This is the <strong>body</strong>.</p>'
... but prefer to use HTML files to save HTML (for syntax-highlighting, etc.),
then create a HTML file like this (called, for example, template.html):
<!-- var heading --> <h1>This is the <em>heading</em></h1> <!-- end --> <!-- var body --> <p>This is the <strong>body</strong>.</p> <!-- end -->
Set up your rollup.config.js like this:
import htmlparts from 'rollup-plugin-htmlparts' export default [ { input: 'index.js', output: { file: "index.min.js", name: "package", format: "umd" }, plugins: [htmlparts('template.html')] } ]
Now, in the index.js mentioned above, you can import variables from
template.html.
import { heading, body } from './template.html'
Run node_modules/.bin/rollup -c to create the index.min.js, which
will have the imported variables.
Anything enclosed within <!-- var <name> --> ... <!-- end --> is treated as
a HTML string and assigned to the variable <name>.
The string is minified by HTML Minifier with these options:
collapseBooleanAttributes: truecollapseInlineTagWhitespace: truecollapseWhitespace: truedecodeEntities: trueremoveComments: truenpm install rollup-plugin-htmlparts
<!-- var --> and <!-- end --># Update package.json version # Update Changelog in README.md npm test git commit . -m"DOC: Release version x.x.x" git push # Ensure that there are no CI build errors git tag -a vx.x.x -m"Add a one-line summary" git push --follow-tags npm publish # maintainer: sanand0