1.0.6 • Published 4 years ago
rollup-plugin-es6template v1.0.6
rollup-plugin-es6template
import a template file written in es6 template syntax, as a function
options
// rollup.config.js
import es6template from 'rollup-plugin-es6template';
export default {
input: 'src/main.js',
output: {
file: 'dist/bundle.js',
format: 'iife'
},
plugins: [
es6template({
include: ['**/*.html', '**/*.css'], // default: [] (all files except js)
exclude: ['**/*.js'], // default: ['**/*.js', '**/*.jsx', '**/*.ts']
env: 'es2017', // default: es2017
})
]
}
for env options, see globals
a template in a template
use $ tag if an inside template uses a same tag with a template file. if an inside template uses another tag, import at js then inject it.
template.html
<ul>${list.map(item=>$`<li>${item}</li>`)}</ul>
${innerTemplate($, { world: 'World' })}
${untag`Three \`newlines\` begin.\n\n\nThree \`newlines\` end.`}
template2.html
<span>${world}</span>
sample.js
import template from './template.html'
import innerTemplate from './template2.html'
const untag = (a,...b)=>String.raw({raw:a},...b)
console.log(template(String.raw, {list:[1,2,3,4], untag, innerTemplate}))