JavaScript
Hubot
es6
es2015

HubotをES6(ES2015)で書いた時のメモ

More than 1 year has passed since last update.


準備


  • babelのインストール

  • es6のコードを置くディレクトリ作成

$npm i --save-dev babel babel-cli babel-preset-es2015

$./node_modules/.bin/babel version
6.3.17 (babel-core 6.3.26)

#hubotのディレクトリ
$mkdir -p src/es6
$ls -l
total 48
-rw-r--r-- 1 t-arata staff 24 1 4 22:12 Procfile
-rw-r--r-- 1 t-arata staff 7784 1 4 22:12 README.md
drwxr-xr-x 4 t-arata staff 136 1 4 22:12 bin
-rw-r--r-- 1 t-arata staff 232 1 4 22:12 external-scripts.json
-rw-r--r-- 1 t-arata staff 2 1 4 22:12 hubot-scripts.json
drwxr-xr-x 116 t-arata staff 3944 1 4 22:13 node_modules
-rw-r--r-- 1 t-arata staff 681 1 4 22:13 package.json
drwxr-xr-x 3 t-arata staff 102 1 4 22:12 scripts
drwxr-xr-x 3 t-arata staff 102 1 4 22:14 src


例(src/es6/nurupo.js)

// Description:

// ぬるぽ ガッ

module.exports = (robot => {
robot.hear(/ぬるぽ/i, res => {
res.send("ガッ")
})
})


compileとHubot起動

# compile

$./node_modules/.bin/babel src/es6 --presets es2015 --out-dir ./compiled
src/es6/nurupo.js -> compiled/nurupo.js

# hubot起動
$./bin/hubot --require ./compiled --name hubot
hubot> ぬるぽ
hubot> ガッ

--requireというオプションをつけると特定のディレクトリのファイルを読み込むことが出来るみたいです。

その他のオプションは--helpで見れるみたいです。

便利ですね。これでHubotからCoffeeScriptを排除できるぜ。


追記(2016/08/30)

この記事を書いて少し経ってから気がついたのですが、

(さっさと追記しようと思ってたら月日が流れてました。すみません。)

そもそも src/scripts ディレクトリにjavascriptのコードを置くと自動でhubotが読んでくれました。

現在の最新バージョン(6.5)だとほとんどのES2015のコードが動くと思うのでそちらを使うのが良さそうです。

もしまだサポートされていない機能を使いたい場合は上記のように別ディレクトリに置いて使うのが良さそうです。


src/scriptsディレクトリに置いた時の例

$mkdir -p src/scripts

$touch src/scripts/nullpo.js

$vim src/scripts/nullpo.js
# ...編集

$cat src/scripts/nullpo.js
// Description:
// ぬるぽ ガッ

module.exports = (robot => {
robot.hear(/ぬるぽ/i, res => {
res.send("ガッ")
})
})

$ls
Procfile bin package.json src
README.md node_modules scripts

$node -v
v6.5.0

$./bin/hubot
bot> ぬるぽ
bot> ガッ