コマンドが苦手なフロントエンジニアのメモ【npm編】

正直コマンド操作が苦手ですが、フロントエンドエンジニアとして最低限知っておくべき操作はありますよね。ということで、この記事では仕事をしていく中で学んだコマンドをメモしていきます。

↓一応実行環境を書いときます

macOS バージョン14.5
VSCode: Version: 1.92.2 (Universal)
node: v22.5.1

npm install 'package-name'

• 指定したパッケージをインストールする
• 新しいパッケージを入れる時に使う

npm ci（npm clean install）

• package-lock.json（パッケージの依存関係）の情報をもとにパッケージをインスール
• 既存のnode-modulesを削除してインストールする
• 開発者間で環境を合わせるために使う

npm install (もしくはnpm i)

• package.jsonに記載されているすべてのパッケージをインストール
• 実際にインストールした情報がpackage-lock.jsonに記載される
• package.jsonに書かれているバージョンには幅（例：^4.1.0）があるため、バージョンを正確に揃えるためには使用すべきではない

npm intall —save-dev （もしくはnpm i-D）

• 開発環境のみで使用する時
• package.jsonのdevDependencies

npm install --production

• dependenciesに書かれているパッケージのみインストール
• 本番環境にデプロイする時にしようする

npm run **

• package.jsonのscriptsに書かれた処理が実行される

• 例えば下記の場合npm run startでreact-scripts startが実行される

package.json

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

最後に

フロントエンドはnpmの知識必要ですよね。
※上記で違う部分ありましたらご指摘いただけると幸いです！