1. 問題発生
Webpackをglobalにインストールすることが非推奨であることを知り、
> npm remove -g webpack webpack-cli
としたところ、既存のプロジェクトにて
> npm run build
'webpack' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。
と出てしまった。
package.json の scripts はこんな感じ
"scripts":{"build":"webpack --mode development",}ひとまずこれは再度グローバルにインストールすることで回避していたが、
ある日、Reactの勉強を始めようとしたところ、
> npx create-react-app pwa-sample
> cd pwa-sample
> yarn start
'react-scripts' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。
と、こちらもNG。
どういうことなの？
2. 試したこと
- node_modules と packege-lock.json を削除して
npm install・・・ NG - コマンドプロンプトやPowerShellを管理者で起動して ・・・ NG
- node_modules/.bin の中に webpack.cmd（react-scripts.cmd） が存在するか確認 ・・・ 存在する
- npx コマンドでstart ・・・ OK
- package.json 内の webpack や react-scripts コマンドのパス書き換え ・・・ OK
つまり、 node_modules/.bin のパスを理解していないということか？
この時点での解決策は以下になるが、これではMacやLinuxと共通化ができずに面倒くさいしイマイチ美しくない。
"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 SetCaseSensitiveInfo 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と併用することになりそう。