package.jsonのscriptsの書き方

ゲームオブスローンズが大好き。
どうも、伊藤くんです。

今まで地味にpackage.jsonの”scripts”の部分について触れてこなかったので、ほんの少しだけ勉強してみました。(“scripts”以外の部分も触れたことありませんが)

この”scripts”の部分といえばあれですね。npm run ~ みたいな感じで予め設定しておいたコマンドを実行してくれるやつですね。

例えば、

"scripts": {
"aaa": "echo helloaaa"
}

と書いて、「npm run aaa」というコマンドを実行すると、「helloaaa」と表示されます。

start,stop,restart,testの4つは予約後になっているそうで、上の「aaa」を「start」とかにすると、実行時「run」を書く必要がなく、「npm aaa」でいけます。

コマンドを繋いで実行

コマンドを直列実行したいときは、やや手間。

以下コマンドでそれに必要なものをインストール

npm install --save-dev npm-run-all

んで、以下のように書く。

"scripts": {
"aaa": "echo helloaaa",
"bbb": "echo hellobbb",
"ccc": "run-s aaa bbb"
}

このように「run-s」でつなげることで、「helloaaa(改行)hellobbb」と表示される。

こんくらいシンプルだと「echo helloaaa && echo hellobbb」でもいいんだろうけど、複雑なコマンドとかになってくるとこういうやり方のほうがいい。ということなのか・・・?

ファイル保存時に自動実行

まあこれがやりたくて今回package.jsonについて調べたわけでやんす。

とりあえず以下のコマンドで必要な道具をインストール。

npm install --save-dev watch

んで以下のように書く!

"scripts": {
"aaa": "echo helloaaa",
"bbb": "watch 'npm run aaa' ./src"
}

書式としては、「watch 【’実行したいコマンド’】 【監視対象フォルダ】」って感じです。

これで、「npm run bbb」とすることで、「./src」フォルダないのファイルを編集して「⌘+s」する度に、「helloaaa」と表示されます。

監視対象にフォルダじゃなくてファイルを指定してみたけど、それはなんかダメっぽかったです。

これで、ファイル変更時自動でビルドしてその後自動でアプリを再起動!みたいなことができます。

実際に僕が書いたものが以下です。

"scripts": {
"dev": "watch 'npm run build-and-start' ./src",
"wabpack-run": "./node_modules/.bin/webpack --config webpack.config.js",
"start:app": "node ./dist/index.js",
"build-and-start": "run-s wabpack-run start:app"
},

こうすることで、「npm run dev」とすることで、./src配下のファイルを更新する度にアプリが再起動してくれる。はずでした

これ、expressで作ってるAPIに対してやったんですが、このままでは以前まで動いてたAPIを止める、みたいな処理がないためポートが被ってしまいエラーとなってしまいました。

以前まで動いてたAPIを止めるというコマンドを書けなくもないでしょうが、それよりもexpressのホットリロードに対応してるパッケージみたいなのをインストールした方が早そうです。(ホットリロード・・・今回みたいにコード変更時に自動でビルドとかを走らせること)

良き勉強になりました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です