npmの疑問あれこれ

本番環境・開発環境で動作するパッケージをインストールするコマンド

npm install パッケージ名
省略形 → npm i パッケージ名

// installが完了すると package.jsonの dependencies パッケージ名が記載される

開発環境で動作するパッケージをインストールするコマンド

npm install パッケージ名 --save-dev
省略形 → npm i パッケージ名 -D

// installが完了すると package.jsonの devDependencies パッケージ名が記載される

PC全体で動作する（グローバルに）パッケージをインストールするコマンド

npm install -g パッケージ名

// installが完了すると PC全体からパッケージが使用できるようになる

インポートされているパッケージを表示するコマンド

npm ls // ローカルパッケージにインストールされているモジュール一覧
npm -g ls // グローバルパッケージにインストールされているモジュール一覧

結局 npm install って何やってんの？

• package.json に記述されてるパッケージをインストールされる
• インストールされると、 node_modules と package-lock.json が作られる
• 誰かに設定を共有するときは node_moudles と package-lock.json は共有しなくてもOK
• ローカルパッケージ プロジェクト内でしか使用できない
• グローバルパッケージ PC全体で使用できる

グローバルパッケージはどこにインストールされるの？

$ npm root -g -> これで表示される場所に格納されている

グローバルパッケージはどこにアンインストールするコマンド

$ npm rm -g パッケージ名

node_modules とは

• npm install するとパッケージがインストールされ、そのパッケージの具体的な処理内容（ファイル）が格納されてるモジュール郡のこと

インストールしたパッケージの呼び出し方

• Node.js では import hoge from '〇〇' 部分でパスの指定がない場合はインストールされたパッケージを探しに行く
• インストールされたパッケージは npm install した時にできる node_modules の中に格納されている
• インストールされたパッケージ（モジュール）のディレクトリ内にある package.json の name に記述されている部分が from '〇〇'　の部分になる
• パッケージが呼ばれたら一番初めに package.json の main のファイルが読み込まれる

import React, { useEffect, useState } from 'react' // パスの指定なし（package.json の name の部分が from '〇〇' の部分になる）
// node_modules の中にある react　のモジュールを参照（一番初めに package.json の main のファイルが読み込まれる）

• 呼び出したいパッケージの中にある特定のファイルを /（スラッシュ） で個別に呼び出すことも可能

import Link from 'next/link'
// node_modules の中にある next　のモジュールの中にある　link.js　が参照される

npm コマンド

• script内に記述すれば npm run 〇〇 で動作する
• JSON形式なので、コマンド内に""（ダブルクォーテーション）で囲う場合は \（バックスラッシュ）でエスケープさせる必要あり
• npm run hello -> hello が出力される
• npm run call -> package.jsonと同じ階層のmain.jsが実行される

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "hello": "echo \"hello\"",
    "call": "node main.js",
  },
}

node_modules内のモジュールをnpmコマンドで処理を走らせる

• node_modules の中にある .bin ディレクトリの中にシンボリックリンクが貼られていばnpmコマンドでモジュールの処理を走らすことができる

例) nodemon パッケージをインストールし てnode_modules/.bin/nodemon が存在しているとき

{
  "scripts": {
    "dev": "nodemon"
  },
}

$ npm run dev -> nodemonが起動する

npxコマンド

• npmをインストールするとnpxコマンドが使えるようになる
• node_modules の中にある .bin ディレクトリの中にシンボリックリンクが貼られていば npx シンボリックリンク名 でモジュールの処理を走らすことができる
  • node_modules の中にある .bin ディレクトリの中に存在しない場合は npm install が実行されてパッケージをインストールするように動作する

$ npx live-server -> live-serverが起動する(存在しない場合はインストールしにいく)