chokidar vs rollup vs webpack vs browserify vs watchify vs grunt-contrib-watch vs parcel vs gulp-watch
JavaScriptビルドツールとファイル監視ライブラリ
chokidarrollupwebpackbrowserifywatchifygrunt-contrib-watchparcelgulp-watch類似パッケージ:

JavaScriptビルドツールとファイル監視ライブラリ

これらのライブラリは、JavaScriptアプリケーションのビルドプロセスやファイル監視を効率化するために使用されます。これにより、開発者はコードの変更をリアルタイムで反映させたり、モジュールをバンドルしたりすることができます。これらのツールは、開発の生産性を向上させ、最終的なアプリケーションのパフォーマンスを最適化します。

npmのダウンロードトレンド

3 年

GitHub Starsランキング

統計詳細

パッケージ
ダウンロード数
Stars
サイズ
Issues
公開日時
ライセンス
chokidar122,759,64211,94882.1 kB343ヶ月前MIT
rollup84,543,26226,2412.78 MB6108日前MIT
webpack41,134,82366,0115.79 MB2113日前MIT
browserify1,719,61914,732363 kB3781年前MIT
watchify618,2511,791-385年前MIT
grunt-contrib-watch504,4061,973-1278年前MIT
parcel282,65944,04644 kB5871ヶ月前MIT
gulp-watch134,112639-708年前MIT

機能比較: chokidar vs rollup vs webpack vs browserify vs watchify vs grunt-contrib-watch vs parcel vs gulp-watch

ビルドプロセス

  • chokidar:

    Chokidarはファイルの変更を監視するライブラリであり、ビルドプロセスには直接関与しませんが、変更をトリガーするために使用されます。

  • rollup:

    Rollupは、ESモジュールを最適化してバンドルするために設計されており、ツリーシェイキングを活用して未使用コードを除去します。

  • webpack:

    Webpackは、複雑なアプリケーションのビルドに特化しており、モジュールの依存関係を解析し、最適なバンドルを生成します。

  • browserify:

    Browserifyは、Node.jsのモジュールをブラウザで使用できるようにバンドルします。シンプルなAPIを提供し、依存関係を解決して一つのファイルにまとめます。

  • watchify:

    Watchifyは、Browserifyの拡張で、ファイルが変更された際に自動的に再ビルドを行います。開発中の効率を向上させます。

  • grunt-contrib-watch:

    Gruntのタスクランナーと連携し、特定のファイルが変更された際に自動でタスクを実行します。設定が簡単で、Gruntのエコシステムを活かせます。

  • parcel:

    Parcelは、設定不要で自動的に依存関係を解決し、ファイルをバンドルします。開発中はホットリローディングをサポートします。

  • gulp-watch:

    Gulpのストリーム処理を活かし、ファイルの変更を監視し、変更があった場合に指定したタスクを実行します。

ファイル監視

  • chokidar:

    Chokidarは、ファイルの変更をリアルタイムで監視し、変更があった場合にコールバックを実行します。非常に効率的で、遅延が少ないです。

  • rollup:

    Rollupには直接的なファイル監視機能はありませんが、他のツールと組み合わせて使用することができます。

  • webpack:

    Webpackは、開発モードでファイルの変更を監視し、ホットモジュールリプレースメントをサポートします。

  • browserify:

    Browserify自体にはファイル監視機能はありませんが、watchifyを使用することで監視機能を追加できます。

  • watchify:

    Watchifyは、Browserifyの監視機能を提供し、ファイルが変更された際に自動的に再ビルドを行います。

  • grunt-contrib-watch:

    Gruntのタスクとしてファイル監視を行い、変更があった場合に指定したタスクを実行します。

  • parcel:

    Parcelは、開発中にファイルの変更を監視し、ホットリローディングをサポートします。

  • gulp-watch:

    Gulpのストリーム処理を利用して、ファイルの変更を監視し、変更があった場合にタスクを実行します。

拡張性

  • chokidar:

    Chokidarは、イベント駆動型の設計により、カスタムコールバックを簡単に追加できます。

  • rollup:

    Rollupは、プラグインを通じて機能を拡張でき、特にモジュールの最適化に強みがあります。

  • webpack:

    Webpackは、豊富なプラグインとローダーを持ち、非常に高い拡張性を誇ります。

  • browserify:

    Browserifyは、プラグインを使用して機能を拡張することができますが、基本的にはシンプルなバンドルツールです。

  • watchify:

    Watchifyは、Browserifyの機能を拡張する形で監視機能を提供します。

  • grunt-contrib-watch:

    Gruntのプラグインエコシステムを活用して、様々なタスクを追加できます。

  • parcel:

    Parcelは、プラグインを使用して機能を拡張できますが、設定が少なく、すぐに使い始められます。

  • gulp-watch:

    Gulpのストリームベースのアプローチにより、簡単にカスタムタスクを追加できます。

学習曲線

  • chokidar:

    Chokidarは、シンプルなAPIを持ち、すぐに使い始められるため、学習曲線は緩やかです。

  • rollup:

    Rollupは、ESモジュールの概念を理解する必要があり、学習曲線はやや急ですが、最適化の効果は大きいです。

  • webpack:

    Webpackは非常に強力ですが、設定が複雑なため、学習曲線は急です。特に、プラグインやローダーの理解が必要です。

  • browserify:

    Browserifyは比較的シンプルで、Node.jsのモジュールシステムに慣れている開発者には学習しやすいです。

  • watchify:

    Watchifyは、Browserifyの使い方を知っていれば、簡単に学習できます。

  • grunt-contrib-watch:

    Gruntを使用する場合、Gruntの基本を理解する必要があり、学習曲線はやや急です。

  • parcel:

    Parcelは、設定不要で使えるため、初心者でもすぐにプロジェクトを開始できます。

  • gulp-watch:

    Gulpのストリーム処理を理解する必要がありますが、直感的なAPIにより学習は容易です。

パフォーマンス

  • chokidar:

    Chokidarは、高速なファイル監視を実現し、パフォーマンスに優れています。

  • rollup:

    Rollupは、ツリーシェイキングを利用して未使用コードを除去し、バンドルサイズを最小化します。

  • webpack:

    Webpackは、複雑なアプリケーションにおいて最適なパフォーマンスを発揮し、動的インポートやコード分割をサポートします。

  • browserify:

    Browserifyは、バンドルサイズが大きくなることがありますが、シンプルなプロジェクトには適しています。

  • watchify:

    Watchifyは、Browserifyの再ビルドを効率的に行い、開発中のパフォーマンスを向上させます。

  • grunt-contrib-watch:

    Gruntのタスクは、設定によってパフォーマンスが変わるため、最適化が必要です。

  • parcel:

    Parcelは、開発中のホットリローディングにより、迅速なフィードバックを提供します。

  • gulp-watch:

    Gulpはストリーム処理を使用するため、パフォーマンスが高く、効率的です。

選び方: chokidar vs rollup vs webpack vs browserify vs watchify vs grunt-contrib-watch vs parcel vs gulp-watch

  • chokidar:

    Chokidarは、高速で効率的なファイル監視が必要な場合に選択します。特に、ファイルの変更をリアルタイムで検知し、アクションをトリガーしたい場合に最適です。

  • rollup:

    Rollupは、ライブラリやモジュールを作成する場合に選択します。特に、ESモジュールを使用し、最小限のバンドルサイズを目指す場合に最適です。

  • webpack:

    Webpackは、複雑なアプリケーションや多様なアセットを扱う場合に選択します。特に、プラグインやローダーを使用してカスタマイズしたい場合に最適です。

  • browserify:

    Browserifyは、Node.jsスタイルのモジュールをブラウザで使用したい場合に選択します。特に、シンプルなビルドプロセスを求める小規模なプロジェクトに適しています。

  • watchify:

    Watchifyは、Browserifyを使用している場合に選択します。特に、開発中にファイルを変更した際に自動的に再ビルドしたい場合に便利です。

  • grunt-contrib-watch:

    Gruntを使用している場合、grunt-contrib-watchを選択します。Gruntのタスクランナーと統合されており、設定が簡単です。

  • parcel:

    Parcelは、設定不要で迅速なビルドを求める場合に選択します。特に、モダンなJavaScript機能をサポートし、開発者体験を重視するプロジェクトに適しています。

  • gulp-watch:

    Gulpを使用している場合、gulp-watchを選択します。Gulpのストリームベースのアプローチを活かし、効率的なファイル処理が可能です。

chokidar のREADME

Chokidar Weekly downloads

Minimal and efficient cross-platform file watching library

Why?

There are many reasons to prefer Chokidar to raw fs.watch / fs.watchFile in 2026:

  • Events are properly reported
    • macOS events report filenames
    • events are not reported twice
    • changes are reported as add / change / unlink instead of useless rename
  • Atomic writes are supported, using atomic option
    • Some file editors use them
  • Chunked writes are supported, using awaitWriteFinish option
    • Large files are commonly written in chunks
  • File / dir filtering is supported
  • Symbolic links are supported
  • Recursive watching is always supported, instead of partial when using raw events
    • Includes a way to limit recursion depth

Chokidar relies on the Node.js core fs module, but when using fs.watch and fs.watchFile for watching, it normalizes the events it receives, often checking for truth by getting file stats and/or dir contents. The fs.watch-based implementation is the default, which avoids polling and keeps CPU usage down. Be advised that chokidar will initiate watchers recursively for everything within scope of the paths that have been specified, so be judicious about not wasting system resources by watching much more than needed. For some cases, fs.watchFile, which utilizes polling and uses more resources, is used.

Made for Brunch in 2012, it is now used in ~30 million repositories and has proven itself in production environments.

  • Nov 2025 update: v5 is out. Makes package ESM-only and increases minimum node.js requirement to v20.
  • Sep 2024 update: v4 is out! It decreases dependency count from 13 to 1, removes support for globs, adds support for ESM / Common.js modules, and bumps minimum node.js version from v8 to v14. Check out upgrading.

Getting started

Install with npm:

npm install chokidar

Use it in your code:

import chokidar from 'chokidar';

// One-liner for current directory
chokidar.watch('.').on('all', (event, path) => {
  console.log(event, path);
});

// Extended options
// ----------------

// Initialize watcher.
const watcher = chokidar.watch('file, dir, or array', {
  ignored: (path, stats) => stats?.isFile() && !path.endsWith('.js'), // only watch js files
  persistent: true,
});

// Something to use when events are received.
const log = console.log.bind(console);
// Add event listeners.
watcher
  .on('add', (path) => log(`File ${path} has been added`))
  .on('change', (path) => log(`File ${path} has been changed`))
  .on('unlink', (path) => log(`File ${path} has been removed`));

// More possible events.
watcher
  .on('addDir', (path) => log(`Directory ${path} has been added`))
  .on('unlinkDir', (path) => log(`Directory ${path} has been removed`))
  .on('error', (error) => log(`Watcher error: ${error}`))
  .on('ready', () => log('Initial scan complete. Ready for changes'))
  .on('raw', (event, path, details) => {
    // internal
    log('Raw event info:', event, path, details);
  });

// 'add', 'addDir' and 'change' events also receive stat() results as second
// argument when available: https://nodejs.org/api/fs.html#fs_class_fs_stats
watcher.on('change', (path, stats) => {
  if (stats) console.log(`File ${path} changed size to ${stats.size}`);
});

// Watch new files.
watcher.add('new-file');
watcher.add(['new-file-2', 'new-file-3']);

// Get list of actual paths being watched on the filesystem
let watchedPaths = watcher.getWatched();

// Un-watch some files.
await watcher.unwatch('new-file');

// Stop watching. The method is async!
await watcher.close().then(() => console.log('closed'));

// Full list of options. See below for descriptions.
// Do not use this example!
chokidar.watch('file', {
  persistent: true,

  // ignore .txt files
  ignored: (file) => file.endsWith('.txt'),
  // watch only .txt files
  // ignored: (file, _stats) => _stats?.isFile() && !file.endsWith('.txt'),

  awaitWriteFinish: true, // emit single event when chunked writes are completed
  atomic: true, // emit proper events when "atomic writes" (mv _tmp file) are used

  // The options also allow specifying custom intervals in ms
  // awaitWriteFinish: {
  //   stabilityThreshold: 2000,
  //   pollInterval: 100
  // },
  // atomic: 100,

  interval: 100,
  binaryInterval: 300,

  cwd: '.',
  depth: 99,

  followSymlinks: true,
  ignoreInitial: false,
  ignorePermissionErrors: false,
  usePolling: false,
  alwaysStat: false,
});

chokidar.watch(paths, [options])

  • paths (string or array of strings). Paths to files, dirs to be watched recursively.
  • options (object) Options object as defined below:

Persistence

  • persistent (default: true). Indicates whether the process should continue to run as long as files are being watched.

Path filtering

  • ignored function, regex, or path. Defines files/paths to be ignored. The whole relative or absolute path is tested, not just filename. If a function with two arguments is provided, it gets called twice per path - once with a single argument (the path), second time with two arguments (the path and the fs.Stats object of that path).
  • ignoreInitial (default: false). If set to false then add/addDir events are also emitted for matching paths while instantiating the watching as chokidar discovers these file paths (before the ready event).
  • followSymlinks (default: true). When false, only the symlinks themselves will be watched for changes instead of following the link references and bubbling events through the link's path.
  • cwd (no default). The base directory from which watch paths are to be derived. Paths emitted with events will be relative to this.

Performance

  • usePolling (default: false). Whether to use fs.watchFile (backed by polling), or fs.watch. If polling leads to high CPU utilization, consider setting this to false. It is typically necessary to set this to true to successfully watch files over a network, and it may be necessary to successfully watch files in other non-standard situations. Setting to true explicitly on MacOS overrides the useFsEvents default. You may also set the CHOKIDAR_USEPOLLING env variable to true (1) or false (0) in order to override this option.
  • Polling-specific settings (effective when usePolling: true)
    • interval (default: 100). Interval of file system polling, in milliseconds. You may also set the CHOKIDAR_INTERVAL env variable to override this option.
    • binaryInterval (default: 300). Interval of file system polling for binary files. (see list of binary extensions)
  • alwaysStat (default: false). If relying upon the fs.Stats object that may get passed with add, addDir, and change events, set this to true to ensure it is provided even in cases where it wasn't already available from the underlying watch events.
  • depth (default: undefined). If set, limits how many levels of subdirectories will be traversed.
  • awaitWriteFinish (default: false). By default, the add event will fire when a file first appears on disk, before the entire file has been written. Furthermore, in some cases some change events will be emitted while the file is being written. In some cases, especially when watching for large files there will be a need to wait for the write operation to finish before responding to a file creation or modification. Setting awaitWriteFinish to true (or a truthy value) will poll file size, holding its add and change events until the size does not change for a configurable amount of time. The appropriate duration setting is heavily dependent on the OS and hardware. For accurate detection this parameter should be relatively high, making file watching much less responsive. Use with caution.
    • options.awaitWriteFinish can be set to an object in order to adjust timing params:
    • awaitWriteFinish.stabilityThreshold (default: 2000). Amount of time in milliseconds for a file size to remain constant before emitting its event.
    • awaitWriteFinish.pollInterval (default: 100). File size polling interval, in milliseconds.

Errors

  • ignorePermissionErrors (default: false). Indicates whether to watch files that don't have read permissions if possible. If watching fails due to EPERM or EACCES with this set to true, the errors will be suppressed silently.
  • atomic (default: true if useFsEvents and usePolling are false). Automatically filters out artifacts that occur when using editors that use "atomic writes" instead of writing directly to the source file. If a file is re-added within 100 ms of being deleted, Chokidar emits a change event rather than unlink then add. If the default of 100 ms does not work well for you, you can override it by setting atomic to a custom value, in milliseconds.

Methods & Events

chokidar.watch() produces an instance of FSWatcher. Methods of FSWatcher:

  • .add(path / paths): Add files, directories for tracking. Takes an array of strings or just one string.
  • .on(event, callback): Listen for an FS event. Available events: add, addDir, change, unlink, unlinkDir, ready, raw, error. Additionally all is available which gets emitted with the underlying event name and path for every event other than ready, raw, and error. raw is internal, use it carefully.
  • .unwatch(path / paths): Stop watching files or directories. Takes an array of strings or just one string.
  • .close(): async Removes all listeners from watched files. Asynchronous, returns Promise. Use with await to ensure bugs don't happen.
  • .getWatched(): Returns an object representing all the paths on the file system being watched by this FSWatcher instance. The object's keys are all the directories (using absolute paths unless the cwd option was used), and the values are arrays of the names of the items contained in each directory.

CLI

Check out third party chokidar-cli, which allows to execute a command on each change, or get a stdio stream of change events.

Troubleshooting

Sometimes, Chokidar runs out of file handles, causing EMFILE and ENOSP errors:

  • bash: cannot set terminal process group (-1): Inappropriate ioctl for device bash: no job control in this shell
  • Error: watch /home/ ENOSPC

There are two things that can cause it.

  1. Exhausted file handles for generic fs operations
    • Can be solved by using graceful-fs, which can monkey-patch native fs module used by chokidar: let fs = require('fs'); let grfs = require('graceful-fs'); grfs.gracefulify(fs);
    • Can also be solved by tuning OS: echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p.
  2. Exhausted file handles for fs.watch
    • Can't seem to be solved by graceful-fs or OS tuning
    • It's possible to start using usePolling: true, which will switch backend to resource-intensive fs.watchFile

All fsevents-related issues (WARN optional dep failed, fsevents is not a constructor) are solved by upgrading to v4+.

Changelog

  • v4 (Sep 2024): remove glob support and bundled fsevents. Decrease dependency count from 13 to 1. Rewrite in typescript. Bumps minimum node.js requirement to v14+
  • v3 (Apr 2019): massive CPU & RAM consumption improvements; reduces deps / package size by a factor of 17x and bumps Node.js requirement to v8.16+.
  • v2 (Dec 2017): globs are now posix-style-only. Tons of bugfixes.
  • v1 (Apr 2015): glob support, symlink support, tons of bugfixes. Node 0.8+ is supported
  • v0.1 (Apr 2012): Initial release, extracted from Brunch

Upgrading

If you've used globs before and want do replicate the functionality with v4:

// v3
chok.watch('**/*.js');
chok.watch('./directory/**/*');

// v4
chok.watch('.', {
  ignored: (path, stats) => stats?.isFile() && !path.endsWith('.js'), // only watch js files
});
chok.watch('./directory');

// other way
import { glob } from 'node:fs/promises';
const watcher = watch(await Array.fromAsync(glob('**/*.js')));

// unwatching
// v3
chok.unwatch('**/*.js');
// v4
chok.unwatch(await Array.fromAsync(glob('**/*.js')));

Also

Why was chokidar named this way? What's the meaning behind it?

Chowkidar is a transliteration of a Hindi word meaning 'watchman, gatekeeper', चौकीदार. This ultimately comes from Sanskrit _ चतुष्क_ (crossway, quadrangle, consisting-of-four). This word is also used in other languages like Urdu as (چوکیدار) which is widely used in Pakistan and India.

License

MIT (c) Paul Miller (https://paulmillr.com), see LICENSE file.