webpackでERROR in Entry module not found: Error: Can't resolve 'babel' と言われて怒られた

久しぶりにwebpackを触ったらタイトル通り怒られてしまったので
その時調べたメモです。
webpackのversionは3.8.1でした。
エラー内容はこんな感じ

$make webpack/admin
path/to/npm run webpack -- --config ./webpack.config.js

> webpack-hello@1.0.0 webpack /Users/a-tanaka/booster
> webpack --watch "--config" "./webpack.config.js"


Webpack is watching the files…

Hash: 4f6ee5333597035827a3
Version: webpack 3.8.1
Time: 48ms

ERROR in Entry module not found: Error: Can't resolve 'babel' in '/Users/a-tanaka/booster'
BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders.
                 You need to specify 'babel-loader' instead of 'babel',
                 see https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed

その時のwebpack.config.jsはこんな形

module.exports = {
    entry: {
        main :__dirname + "/main.js",
    },
    output: {
        path: __dirname + '/dist/',
        filename: '[name].bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel'
            }
        ]
    },
    resolve: {
        extensions: ['*', '.js']
    }
};

結論から言うとmodule.loaders[0].loaderの babel を babel-loader に変える必要があるみたいですね

変更後

module.exports = {
    entry: {
        main :__dirname + "/main.js",
    },
    output: {
        path: __dirname + '/dist/',
        filename: '[name].bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            }
        ]
    },
    resolve: {
        extensions: ['*', '.js']
    }
};

変更後に実行すると大丈夫そうでした。

$make webpack/correct
path/to/npm run webpack -- --config ./webpack.config.corrent.js

> webpack-hello@1.0.0 webpack /Users/a-tanaka/booster
> webpack "--config" "./webpack.config.corrent.js"

Hash: 8bee2d00eb6691bcae24
Version: webpack 3.8.1
Time: 433ms
         Asset     Size  Chunks             Chunk Names
main.bundle.js  2.51 kB       0  [emitted]  main
   [0] ./main.js 38 bytes {0} [built]

webpack1.xから2.xになる際にloaderのsufiixもつけないといけなくなったみたいですね。
そんな触ってなかったっけな・・・という思いが強いですｗ

https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed

検証用に使ったコードはgistに置いたので参考になれば幸いです。

https://gist.github.com/ara-ta3/dd980bb3e014659339bf3739ff939e05

参考

• Webapack 2 - It's no longer allowed to omit the '-loader' suffix when using loaders. · Issue #59 · tcoopman/image-webpack-loader · GitHub

Gotanda.js#4 in Retty でLTしてきました #gotandajs

6/3にGotanda.jsというイベントがあり、そこでLTしてきました。

gotandajs.connpass.com

イベント全体を通した内容などはこちらの記事にまとめられていました。
（私の資料次の日にあげたので見つからなくてすみません・・・
www.chirashiura.com

発表内容

発表資料はこちらです。
slideshareあげたら日本語消える問題直ってなかったので、speakerdeckにしました。

speakerdeck.com

node-questというライブラリを作ってSlack上でRPGを再現するみたいな話をしました。
node-quest自体は概念だけで、hubot上で色々実装する必要はありつつ、色々実装してみてこんな感じで遊べるよみたいなのが伝わればよかったかなぁと思います。
是非気になった方はぜひ使ってみてください＼＼\ ٩( 'ω' )و //／／
ただ、version1.0.0行くまでは突然インターフェースが変わる可能性があったりするので、すみませんというところです・・・ｗ

www.npmjs.com

ほんとはやりたかったこと

hubotの具体的な実装を書いたpluginを公開してだれでもインストールできるようにしたいなと思っていたので、これは今後やろうかなと思いました。
先週やる気が出なくて、空実装まででした。

github.com

感想

• JSのフレームワークとかbuildツール周り趣味でしか使っていないので、その辺聞けて良かった
• Webpackで3分半と聞いてやばそうと思った（小並感）
• 学びが多くて良いためにLTする側としてはハードル高くてめっちゃ緊張した
• デモ盛り上がってよかった
• またいい感じのネタを仕込んでLTしにいきたい＼＼\ ٩( 'ω' )و //／／

hubot-mojiという雑なhubot pluginを作ってみた。

Slack内でEmojiで文字を表示して遊んでるシーンがあったので、それをpluginにしてみました。
どういう遊びかわからないと思うので貼っておくと、イメージはこんな感じです。

使い方

• インストール

$npm install --save hubot-moji

• 使い方

主な用途はSlack内で使うことで、文字で見てもよくわからないので、画像で載っけてみました。

hubot moji set blank で背景用のEmojiを設定します。
hubot moji set filled で文字用のEmojiを設定します。
Emojiがおすすめですが、特に制限はないです。
hubot moji parse hogehoge とやると設定されたEmoji等でparseの引数になってる文字が表示されます。
残念ながらアルファベットのみ対応中です。

ちなみにこうすると大草原にすることが出来ます。

hubot moji set blank :wwww: 
hubot moji set filled :wwww:
hubot moji parser aaaaa

レポジトリとか

コミットは雑だし、READMEも雑なので、せめてREADMEくらいは今度整理しようと思います。

github.com

www.npmjs.com

まとめ

• とてもくだらないスクリプト書くのすごく楽しい＼＼\ ٩( 'ω' )و //／／
• 書いた後にググったら知り合いの人がすでに書いていたｗ

www.npmjs.com

npm linkというコマンドを知った。

nodeのなんらかのモジュールを作ろうとしていて、実際に他のライブラリから呼んで動くかどうか確認したい時ありませんか。
私は毎度package.jsonに "hoge" : "https://github.com/foo/bar.git" みたいな書き方できるので、github上に置いてnpm installしてました。
そしたら、知人が npm link というものがあると教えてくれたのでその備忘録です。

使い方

開発中のモジュールのディレクトリに移動して、 npm link をします。
そうするとglobalなnode_modulesディレクトリにシンボリックリンクがはられます。
そして、そのパッケージを使いたいモジュールのディレクトリに移動して npm link {package name} を実行すると
そのディレクトリにnode_modulesが生成されて、シンボリックリンクがまたはられます。
実際にやってみました。

# 適当なnpm moduleを作成
$npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (hoge)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /path/to/repo/hoge/package.json:

{
  "name": "hoge",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this ok? (yes)

# globalなnode_modulesにシンボリックリンクを貼る
$npm link
npm WARN EPACKAGEJSON hoge@1.0.0 No description
npm WARN EPACKAGEJSON hoge@1.0.0 No repository field.
/usr/local/var/nodebrew/node/v5.1.0/lib/node_modules/hoge -> /path/to/repo/hoge

# ↑で作ったmoduleを使うための設定
# 適当なnpm moduleをもう一つ作成
$npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (fuga)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /path/to/repo/fuga/package.json:

{
  "name": "fuga",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this ok? (yes)

# このmoduleでhoge moduleを使う設定
$npm link hoge
/path/to/repo/fuga/node_modules/hoge -> /usr/local/var/nodebrew/node/v5.1.0/lib/node_modules/hoge -> /path/to/repo/hoge

# globalなnode_modulesにシンボリックリンクがはられていました。
$ll node_modules/
total 8
lrwxr-xr-x  1 arata  staff    57B  1 17 00:59 hoge -> /usr/local/var/nodebrew/node/v5.1.0/lib/node_modules/hoge

シンボリックリンクなので、当然修正した分はすぐ反映されますね。
開発中のモジュールをローカルでインテグレーションテストをしたい時に便利そうです。

参考文献

• ドキュメント

• https://docs.npmjs.com/cli/link

• npm linkが意外と便利だった

• http://www.tejitak.com/blog/?p=1535