Ractive.js + webpack + gulpのときのテンプレート、プラグインのrequire

Ractive.jsのwebアプリを書いてwebpack+gulpでビルドしています。
webpackでのビルドはqiitaなど他のいろいろな記事を参考にしてできるようになりました。
その際、Ractive.jsのテンプレートやプラグインのrequireに関して分かったことのメモです。

プラグインモジュールの読み込み

公式でpluginとして紹介されているトランジションやカスタムイベントプラグインを<script>タグで読み込む場合は、ただ<script>タグを書くだけでいいものが多いですが、モジュールとしてrequireする場合、それぞれ多少クセがありました。

それぞれのモジュールはnpmなどでインストール済みとします。

var Ractive = require('ractive');

//キーイベントはまずローカル変数としてrequireする
var keys = require('ractive-events-keys');

//hoverとslidehorizontalはrequireのみ
require('ractive-events-hover');
require('ractive-transitions-slidehorizontal');

var ractive = new Ractive({
    el: '#main',
    template: require('ractive!./template.html'),
    //slideとfadeはここでrequire
    transitions: {
        slide: require('ractive-transitions-slide'),
        fade: require('ractive-transitions-fade')
    },
    //実際のキーイベントはkeys変数から指定
    events: {
        escape: keys.escape,
        scape: keys.space,
        enter: keys.enter,
        uparrow: keys.uparrow,
        downarrow: keys.downarrow
    },
    data: {
        //データ
    }
});

テンプレートやpartialをモジュールをロードする感覚で読み込みたい。

<script>タグ内に書くとエディタによってはハイライトやインデントをしてくれなくなったりします。なので.htmlや.mustacheで書いてこんな感じにしてrequireしたい

├── app.js
├── template.html //メインテンプレート
└── partials //メインテンプレート内で使うpartial
    ├── header.html
    ├── footer.html
    └── menu.html

これを簡単にrequireするには ractive-loaderをインストールする

$ npm install --save ractive-loader

これだけであとはメインのjsでテンプレートを'ractive!'のプリフィックスをつけてこんな感じで指定すればOK。
webpackのconfigに設定するやりかたもありましたがこっちで問題なくできました。

var Ractive = require('ractive');

var ractive = new Ractive({
    el: '#main',
    template: require('ractive!./template.html'),
    partials:  {
        header: require('ractive!./partials/header.html'),
        footer: require('ractive!./partials/footer.html'),
        menu: require('ractive!./partials/menu.html')
    },
    data: {
        //データ
    }
});

これだと本体のテンプレートやpartialは.htmlなどの通常のファイルとして書けます。
ビルドするとテンプレートのhtmlはjsオブジェクトにパースされて出力されていました。