handlerbars.js 的引擎模板只能用script标签的形式写在HTML文件里吗？可以写在单独的js文件里面吗？

Question

想使用模板引擎，看了handlerbars.js文档，模板好像都是写在script标签里的

<script type="text/x-handlebars-template" id="tpl">
　　{{#each}}
　　　　...
　　{{/each}}
</script>

然后再到js文件里用Jquery调用，

//获取到模板
var tpl = $("#tpl").html();
//预编译模板
var template = Handlebars.compile(tpl);
//模拟数据（也可以是获取的json数据）
var context = {};
//匹配数据
var html = template(context);
//输入模板
$('body').html(html);

我觉得有些麻烦，也不方便封装成组件，反复使用。
不知道能否把模板放到js文件里，用ES6的方法引入这些模板，就像：

import template from 'template'

求前辈指教，谢谢

Answer 1

handlerbars.js 是字符串模板，其实如果使用ES6，使用ES6模板字符串也是很方便的，可以看看模板字符串，也可以看看支持webpack,node构建的aui-template。

ES6的例子：

模板字符串 template.js：

export default function template (data) {
  return `<p>name: ${data.name}</p>
  <p>age: ${data.profile.age}</p>
  <ul>
    ${data.skills.map(skill => `
    <li>${skill}</li>
    `).join('')}
  </ul>`
}

调用：

import template from './template'

const data = {
  name: 'zhaomenghuan',
  profile: { age: 24 },
  skills: ['html5', 'javascript', 'android']
}

document.body.innerHTML = template(data)