Babel でお手軽モダン Hubot 開発

Babel を使ってお手軽に ES201x でモダンな Hubot 開発を行えるようにしてみました。

TL;DR

1. Configure your hubot following necojackarc-sandbox/hubot-babel-es201x
2. Code your Hubot scripts in src/bot directory with Babel ES201x

プロローグ

偶然にも ChatOps 用の Bot を作ることになった俺達は、
CoffeeScript で書かれ時代に取り残された Hubot に遭遇したのだった……。

……。

…………。

Hubot の最終コミットが10ヶ月前になってて少し焦りました。

• github/hubot

パッと調べても¹いい感じの代替ツールが見つからなかったので、この更新頻度は安定の証、枯れたプロダクトだと信じて Hubot を使うことにしました。

ただし、CoffeeScript は流石にもう書きたくないので、Babel を利用して ES201x で書けるようにします。

お手軽度

Babel しか使わないのでかなりお手軽です。
また、Babel の設定もスッキリ少なめです。

仕組み

Hubot は src/scripts と scripts にある、.coffee と .js ファイルを自動的に読み込みます。

ここにあるファイルは以下のようなファイルフォーマットであることが期待されます。

module.exports = (robot) ->
  # your code here

要は Hubot 用のスクリプトファイルです。

これを踏まえ、今回は以下のようなディレクトリを追加しました。

ディレクトリ	説明
dist	トランスパイル後のファイル置き場
src/bot	ES201x で書かれた Hubot スクリプト置き場
src/lib	ES201x で書かれたファイル置き場2

簡単に流れを説明すると、

1. src 以下で ES201x で開発を行う
2. dist 以下に src 以下のファイルをトランスパイルし吐き出す
3. scripts で dist/bot 以下のトランスパイルされた Hubot スクリプトを読み込む

となります。

設定手順

まずは Getting Started With Hubot に従い、Hubot を作成します。

次に Babel と必要なプリセット等を導入します。

$ npm install -D babel-cli babel-polyfill babel-preset-env

Babel の設定を .babelrc に記述します。

.babelrc

{
  "only": [
    "src"
  ],
  "presets": [
    ["env", {
      "targets": {
        "node": "current"
      }
    }]
  ]
}

ビルドコマンドを package.json に追加します。

package.json

{
  "scripts": {
    "build": "babel src -d dist"
  }
}

scripts に dist に吐き出された Hubot スクリプトを読み込むコードを追加します。

scripts/index.js

'use strict';

const fs = require('fs');
const path = require('path');

const ROOT = "./dist/bot";

const stripExtension = path => path.split('.').slice(0, -1).join('.');

module.exports = (robot) => {
  fs.readdirSync(ROOT).forEach((dir) => {
    require(path.join('..', ROOT, dir)).default(robot);
  });
};

最後に必要なディレクトリを作成して設定完了です。

$ mkdir -p src/bot src/lib

サンプルスクリプトによる動作確認

試しに、以下の Hubot スクリプトを src/bot/konosuba.js に配置して動かしてみます。

src/bot/konosuba.js

export default function(robot) {
  robot.hear(/アクア/, (res) => {
    res.reply('駄女神');
  });
}

bin/hubot で起動すると、

hubot-babel-es201x> アクア様
hubot-babel-es201x> Shell: 駄女神

無事、動きました！

1. 12+ Frameworks to Build ChatOps Bots ↩

2. Hubot スクリプト以外の JavaScript ファイル置き場として準備しました ↩