ブラウザのデベロッパーツールのコンソールを愛用する人たちのための node REPL

commits1 min read読了の目安(約1600字

ちょっとした計算をするときなど
すぐに使える REPL 環境としてブラウザのデベロッパーツールのコンソールは便利です。

image

しかしブラウザの制限として CORS リクエストで弾かれたり
ローカルのファイルが開けなかったりします。

image

そこで下記のコマンドを実行します。

npm install --global cross-fetch
NODE_PATH=$(npm root -g) node --inspect -r cross-fetch/polyfill

すると下記の画像のように見慣れた画面でファイル操作などができます。

image

cross-fetch

node -r cross-fetch/polyfillfetch を使えるようにします。
node で http リクエストを投げるのはそこそこ面倒なので fetch が使えた方が良いです。
好みで axios にしても良いと思います。

NODE_PATH=$(npm root -g) で global にインストールしたモジュールを使えるようにしています。

あまり global にいろいろインストールしたくないので
npx でなんとかできないかと調べていたのですがまだできないようです

--experimental-repl-await

Top Level await を使えるようになる…のですが
後述する --inspect を使いたい都合で効果があまりないので書かなくても良いです。

--inspect

chrome で chrome://inspect などから node に繋げられるようにします。
下記の画像の node[36841] file:/// にある下の inspect と書かれたリンクを押すと開きます。

image

注意点として下記の画像のように VM Context となっていると fetch などが使えないので切り替えるかしばらく待つと勝手に切り替わります。

image

改善案

deno の完成度が上がれば deno を使う方が web を同じ api が使えて便利そうなので期待してます。