chokidarモジュールの使い方

2023年4月26日

  • webpackでentry外のファイルをwatchして、node.jsの処理を発動させたい
  • webpackのstatsじゃなくて、自作のログを表示させたい

こんな時に使える便利なモジュール「chokidar」

Node.jsにはfs.watchやfs.watchFileなど、監視してくれる機能もありますが、

chokidarの方が色々便利な機能がついているので、こちらの方をよく利用します。

使い方

公式サイトの使い方は以下の通り

npm install chokidar
const chokidar = require('chokidar');

// 実行
chokidar.watch('.').on('all', (event, path) => {
　console.log(event, path);
});

これでも一応動くのですが、コマンド打つたび一番最初に↓のメッセージが毎回流れてきて結構ストレス。。。

いや、コマンド打ったあとの変更を監視して欲しいんですよ。。。！

addDir .
add main.js
addDir node_modules
add package-lock.json
add package.json
addDir src
add src/.DS_Store
addDir src/img
~~~~

 

というわけで、自分なりのチュートリアルとしては以下のやり方が良いと思います。

npm install chokidar -D // 自分の場合はdevDependenciesでOK
const chokidar = require('chokidar');

const watcher = chokidar.watch('.'); // 監視対象のフォルダ階層指定
watcher.on('ready', () => {
 watcher.on('all', (event, path) => {
  console.log(event, path);
 });
});

これで、コマンド入力時は何もログが表示されず、その後の監視対象のフォルダ/ファイルに変更が発生した場合のみ、ログが出力されるようになります。

監視対象のパス指定

chokidar.watchの第1引数として指定する

chokidar.watch('.'); // 現在の階層配下を監視
chokidar.watch('./src/'); // srcフォルダ配下を監視

// 監視階層指定をしてからそのまま起動させる場合
chokidar.watch('./src/').on('all',(event, path) => {
 console.log(event, path);
});

オプション指定

chokidar.watchの第2引数としてobject形式で指定する

chokidar.watch('.', [options]); // format

// sample
chokidar.watch('./src/', {
  persistent: true,

  ignored: '*.txt',
  ignoreInitial: false,
  followSymlinks: true,
  cwd: '.',
  disableGlobbing: false,

  usePolling: false,
  interval: 100,
  binaryInterval: 300,
  alwaysStat: false,
  depth: 99,
  awaitWriteFinish: {
    stabilityThreshold: 2000,
    pollInterval: 100
  },

  ignorePermissionErrors: false,
  atomic: true // or a custom 'atomicity delay', in milliseconds (default 100)
});
name type/default discription
persistent boolean/true 監視している最中にプロセスを続けるかどうか
ignored string/null 無視するファイルやパスを定義
ignoreInitial boolean/false 未調査
followSymlinks boolean/true 未調査
cwd string/null ベースとなるディレクトリの指定
disableGlobbing boolean/false 未調査
usePolling boolean/false 未調査
interval number/100 未調査
（usePollingがtrueの場合の設定）
binaryInterval number/300 未調査
（usePollingがtrueの場合の設定）
alwaysStat boolean/false 未調査
depth number/undefined 再帰的に監視するフォルダの深さを指定
awaitWriteFinish boolean/false 未調査
awaitWriteFinish
.stabilityThreshold		 number/2000 未調査
awaitWriteFinish
.pollInterval		 number/2000 未調査
ignorePermissionErrors boolean/false 読み取り権限のないファイルを監視するかどうか
atomic boolean/true 未調査

イベント

.onメソッドで指定する項目

chokidar.watch('.').on(event, callback);
name discription
all 全てのイベント
add ファイルが追加された
addDir フォルダが追加された
change ファイルが変更された
unlink ファイルが削除された
unlinkDir フォルダが削除された
ready chokidarが準備出来た
raw 未調査
error chokidarがエラーになった
callback event:イベントの名前
path:イベントが発生したファイル/フォルダのパス情報

chokidar.watch('.').on('all', (event, path) => {
 console.log(event + ':イベント名');
 console.log(path + ':ファイルパス');
});

その他の機能については公式README参照

chokidar使う方法はこちらの記事のwatch.jsなどをご参照下さい

Links

README：https://github.com/paulmillr/chokidar/blob/master/README.md

chokidar+α：https://homeworks.cloud/post-342/

JS, Node.js, Webpack

Posted by takahiro