Node.js, パッケージのコマンドが実行できない。インストールしたのに。

npmパッケージで yarnとかwebpackとかインストールしているはずなのに、コマンドが実行できないことはよくあります。

それ、グローバルインストールするの忘れてます。

忘れるくらいならnpxコマンドを使うのをおすすめします。

グローバルインストールは意外と面倒なことが出てくるし。

かんたんに超高速WordPressでサイトを作る、KUSANAGIが使える低価格クラウド・VPS・レンタルサーバ

PCが壊れるなどして環境移行などをしたとき、前のPCではnpmパッケージコマンドが実行できたのに、移行先ではできないとか出てきたりします。

'yarn install' を実行したらコマンドが見つからないとか言われてしまう。

それは、yarnをglobalインストールしていないからです。

やっかいなのは、GitHubなどのリポジトリにはnpmパッケージをまとめてインストールできるpackage.jsonがあったりします。

このファイルを使って 'npm install' を実行したらそれで終わりって思っちゃうんですね？

でもソースプロジェクトのホームにあるローカルのpackage.jsonにはglobal設定はありません。

globalインストールは別途、手動でやらないといけない。

ここで作業が詰まるくらいなら、思い切ってglobalインストールはやめてnpxコマンドを使ったほうがストレスが無いです。

Node.js, npxコマンドってなんだ？たんなるnpm runの代わりじゃない。

『package.jsonをリポジトリに置いといたから実行環境はすぐできるよ～。』

と相手方に伝えたら、

『yarnとかwebpackのコマンドが動かないんだけど？』

みたいなやりとりが出てくるのも面倒だし。

package.jsonのスクリプトは変更なし

ここで、ひとつの疑問をもつ人がいるでしょう。package.jsonのスクリプトにもnpxを書く必要があるのかと。

その心配はほぼありません。

package.jsonのスクリプトの例

{
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "external-css": "python css-minify-v2-honban.py",
    "cleanup": "python cleanup.py",
    "build": "webpack --mode=production --profile --progress=profile & yarn external-css & yarn cleanup",
    "dev": "webpack --mode=development & yarn external-css & yarn cleanup",
    "watch": "npx nodemon --ext scss,js,html --watch src --exec yarn build"
  },
}

たとえば上記のような設定でも動きます。yarnやwebpackの前にnpxがついてないのに。

このスクリプトの実行はこのコマンドでOK。