haml_coffee_assets用のwebpackerのloaderを書く

haml_coffee_assetsというgemがある。
これは、sprocketsを使うときにjs側のテンプレートをhaml+coffeescriptのようなもので書けるというニッチなgemだった。
けれども、昨今のwebpackerの台頭や、haml_coffee_assetsの作者様がこの世にいないのでメンテがほぼされておらず・・・、の状態だった。

プロジェクトをwebpackerに移行したいけど、大量のhamlcファイルをどうすりゃいいんだよ・・！？
となったので、結局自分でhamlcのlaoderを書くことにした。
世の中にいくつかあるhamlcのloaderは、古いnodeに依存した書き方だったりして、動かなかったんだよね。

やってみる

loaderは次のようにした。

// config/webpack/loaders/hamlc_loader.js
const hamlc = require('haml-coffee')

module.exports = function (source) {
  const match = this.resourcePath.match(/\/templates\/(.+?)\.hamlc$/)

  return `export default ${hamlc.template(source, match[1], 'window.JST')}`
}

やってることはめっちゃ簡単で、hamlcが置いてあるディレクトリからhamlcを読み込んで、haml-coffeeでコンパイルしているだけ。それをグローバルのJSTオブジェクトに格納している。
loaderってどうやって書くんだと色々調べた結果、どうやら、なんか処理してexport defaultの文を文字列で返すことにより、ローダーを作れるというのがわかった。

もう一つ大事なのが、hamlc-loaderを設定するファイル。
それが次。

// config/webpack/loaders/hamlc.js

const path = require('path')

module.exports = {
  test: /\.hamlc$/,
  use: [{
    loader: path.resolve('./config/webpack/loaders/hamlc_loader.js')
  }]
}

あとは、これをwebpackerのenvironment.jsでrequireして・・

const hamlc = require('./loaders/hamlc')
environment.loaders.prepend('hamlc', hamlc)

webpacker.ymlのextensionsにhamlcを追加するだけ

extensions:
  - .hamlc

おわりに

コードは書いてみると少なかったんだけど、調査段階で時間がかかってしまった。
時間をかけた割に、今後使用することも無いでしょう。
めでたしめでたし。