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

1 min読了の目安(約1500字IDEAアイデア記事

ちょっとした計算をするときなどなど
すぐに使える 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 が使えて便利そうなので期待してます