rtpl-loader

一个webpack loader, 传入tpl模板文件，输出js,

像写es6一样写html~~~

github: https://github.com/weivea/rtpl-loader

install

npm install rtpl-loader --save-dev

usage

通过['babel-loader', 'rtpl-loader'],rtpl模板文件被编译成为一个对象，拥有一个render方法

js调用;

var template = require('./index.rtpl');
var pageData = {
  // 渲染数据
}
var html = template.render({
  data: pageData
});

模板语法

模板分为 script 和 template 两部分, template 下的 ${}里的表达式可以使用 script 中 定义 或者 import 的变量，具体见示例

<script>
  import * as subrtpl from './index-sub.rtpl';
  var a = 1;
  var data = {
    b: 2
  }
  // js
</script>
<template>
  <!-- 参杂模板字符串语法的html -->
  ${subrtpl.render({data})
  <div>
    ${a}
  </div>
</template>

示例

// webpack.config.js

var path = require('path');
module.exports = {
  //...
  entry: {
    "index": path.resolve(__dirname, 'index.js')
  },
  // devtool: "eval-source-map",
  output: {
    filename: 'bundle.js',
    auxiliaryComment: 'mi app store Comment'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: ['babel-loader']
      },
      {
        test: /\.rtpl$/,
        use: ['babel-loader', 'rtpl-loader']
      }
    ]
  }
};

// index.js

var template = require('./index.rtpl');

var html = template.render({
  data: {
    a: 1,
    b: 2
  }
});

console.log(html);
document.body.innerHTML = html;

<!-- index.rtpl -->
<script>
  import * as subrtpl from './index-sub.rtpl';
  import * as plugin from './plugin';
  var list = [1,2,3]
</script>
<template>
  <div>
    <span>${data.a}</span><span>${data.b}</span>
    <div>${plugin.add(1,2)}</div>
    ${
      subrtpl.render({
        data
      })
    }
    ${
      list.map(function(item){
        return <template>
          <div>${item}</div>
        </template>
      }).join('\n')
    }
    <div>
      ${
        (()=>{
          return '想怎么写就怎么写';
        })()
      }
    </div>
  </div>
</template>

<!-- index-sub.rtpl -->
<template>
  <ul>
      <li>${data.a}</li>
      <li>${data.b}</li>
  </ul>
</template>