Windowsでnpm startしたときに「内部コマンドまたは外部コマンド～」と出てくる現象と戦う

1. 問題発生

Webpackをglobalにインストールすることが非推奨であることを知り、

> npm remove -g webpack webpack-cli

としたところ、既存のプロジェクトにて

> npm run build
'webpack' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。

と出てしまった。
package.json の scripts はこんな感じ

package.json

"scripts": {
	"build": "webpack --mode development",
}

ひとまずこれは再度グローバルにインストールすることで回避していたが、
ある日、Reactの勉強を始めようとしたところ、

> npx create-react-app pwa-sample
> cd pwa-sample
> yarn start
'react-scripts' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。

と、こちらもNG。
どういうことなの？

2. 試したこと

1. node_modules と packege-lock.json を削除して npm install ・・・ NG
2. コマンドプロンプトやPowerShellを管理者で起動して ・・・ NG
3. node_modules/.bin の中に webpack.cmd（react-scripts.cmd） が存在するか確認 ・・・ 存在する
4. npx コマンドでstart ・・・ OK
5. package.json 内の webpack や react-scripts コマンドのパス書き換え ・・・ OK

つまり、 node_modules/.bin のパスを理解していない ということか？
この時点での解決策は以下になるが、これではMacやLinuxと共通化ができずに面倒くさいしイマイチ美しくない。

package.json

"scripts": {
	"build": "node_modules\\.bin\\webpack.cmd --mode development"   // webpackの場合
	"start": "node_modules\\.bin\\react-scripts.cmd start"   // react-scriptの場合
}

通常、私はプロジェクト用のディレクトリは D:\projects というパスに設置しているが、
ちょっと気分を変えて C:\Users\hogehoge\Documents（マイドキュメント） にて作業してみた。

>yarn start
yarn run v1.22.0
$ react-scripts start
Starting the development server...
Compiled successfully!

あれ？通った？

3. 原因判明

CドライブとDドライブで何が違うんだろう・・・とパーミッションやnpmグローバルディレクトリを覗いていたがよくわからない。
C:\Users\hogehoge\AppData\Roaming\npm-cache\_logs も見るがパスは通っているように見える。
(PATHの行に プロジェクトディレクトリ/node_modules/.bin が含まれている)

後は何が問題なのだろうか、ドライブ間で何か特別な操作をしただろうか？

1つだけあった
それは以前に 大文字小文字を区別する設定をしていた ことだった。

# 管理者で実行
> fsutil.exe file queryCaseSensitiveInfo D:\projects
ディレクトリ D:\projects の大文字と小文字を区別する属性が有効になっています。

試しにこれを解除して再チャレンジ

# 管理者で実行
> fsutil.exe file SetCaseSensitiveInfo D:\project disable
ディレクトリ D:\project の大文字と小文字を区別する属性が無効になっています。

# 通常ユーザーで実行
> yarn start
yarn run v1.22.0
$ react-scripts start
Starting the development server...
Compiled successfully!

問題なく通りました。
もちろんwebpackもOK。

どうやら、webpack や react-scripts コマンドは webpack.cmd や react-scripts.cmd ではなく、webpack.CMD や react-scripts.CMD を探していた、ということらしい。

安易にSetCaseSensitiveInfoを有効にしないように注意しましょう。
ただ、これが有効になっていないと困るケースもあるので悩ましい・・・
状況により中段に書いた node_modules\\.bin\\webpack.cmd と併用することになりそう。

コメントをいただき解決しました！

SetCaseSensitiveInfo を有効にしたままコマンドを通す

.cmd が実行できるように環境変数に追加することで回避できました。

1. コントロールパネルのシステムを開く
2. システムの詳細設定
3. 環境変数
4. 下段のPATHEXTの編集で末尾に ;.cmd を追記
5. 保存してコマンドプロンプトを開き直す

# 通常ユーザーで実行
> yarn start
yarn run v1.22.0
$ react-scripts start
Starting the development server...
Compiled successfully!