Help us understand the problem. What is going on with this article?

Babel でお手軽モダン Hubot 開発

More than 1 year has passed since last update.

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ヶ月前になってて少し焦りました。

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

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

お手軽度

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

仕組み

Hubot は src/scriptsscripts にある、.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 ファイル置き場として準備しました 

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした