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}))