WebpackBinでブラウザ上でWebpack+ESNextのようなコードを書いて動作をシェアする

あるライブラリのドキュメントを見てたら、Exampleコードの所で使われていて知りました。

Webpackbinはブラウザ上でコードを書いてチェックできます。jsFiddleやCodepenといったサービスとよく似ていますがimportでパッケージを読み込んだりできるので、一々CDNのURLを調べて読み込ませる必要がありません。ただコチラは<iframe/>で埋め込んだりはできないようです。（ロードが長いので仕方ないのかも）

使い方

BabelかTypeScriptか選ぶ

WebpackbinにアクセスするとBabelかTypescriptどっちを使うか聞かれると思うのですが、僕はES2015の方しか使っていなのでこっちを選択してください。

選択するとURLが変わったと思いますが、シェアする時は多分このURLを貼り付けます。

とりあえず挨拶

挨拶というか実行してみます。最初からmain.jsがあると思うのでそれを選択して適当にconsole.log('Hello WebpackBin!')とでも書いておきます。

上のコントロールバーの右から３つ目のアイコン（画像参照）をクリックするとログを出力する場所が出てくるので、ここでチェックできます。コードを書いたらcmd+s(winだとctrl+s?)すれば実行できると思います。

Reactを使ってみる

まずパッケージとReactなのでjsxを使えるようにする必要があります。これには右上の歯車アイコンをクリックして設定する必要があります。

1. babel-loaderの設定の中のReactにチェックを入れる
2. 「Add NPM package」でreactとreact-domを追加

後はコードを書くだけです。これはなんでもいいのでとりあえずこうなります。右に結果が出るはずです。

ちなみに上記の画像の動作の辺りはココで見れます。

RxJS

こっちはただrxjsを追加するだけですね。

後はコード書いて実行するだけです。

動作を見る

なんでこれを載せたかというと、rxjs/Rxだと何故かimportできなくてエラーになってしまうので、ちょっと良くわからない部分もあります😇

他に

ツリービューみたいに表示

Live機能で編集者の変更した部分をリアルタイムで反映させて見せる

即ローカルで試せる形でダウンロード

歯車の左のアイコンをクリックするとダウンロードできます。ダウンロードしたディレクトリに移動 -> yarn -> yarn startでポート３０００で建つので、即ローカルに持ってくることもできます。

おわりに

これから活用していこうと思います😍