Zenn
🐼

npmまとめ！

2021/03/11に公開
Node.js
npm
#
初学者
tech

はじめに

npmについて整理したかったので書いてみました！！

npm(Node Package Manager)とは？

  • Node.jsのパッケージ管理ツール
  • パッケージのインストール、アンインストール、バージョンの管理などが可能
  • Node.jsをインストールすると同時にnpmもインストールされる

公式サイト
公式ドキュメント

Node.jsのインストール

nodebrew,nodenvともにNode.jsのバージョン管理ツールです。
nodenvは作業ディレクトリごとに自動で指定したNode.jsのバージョンに切り替えてくれます。

nodenv経由でインストールしたい方はこちら
→nodenvでNode.jsをインストールする方法

nodebrew経由でインストールしたい方はこちら
→nodebrew経由でNode.jsをインストールす方法

npmコマンド

$ npm コマンド [オプション]

→npmとyarnのコマンド早見表

// npmのバージョンの確認
$ npm -v

パッケージのインストール

インストール方法は２つある

インストール方法 説明
グローバルインストール • パッケージは全てのプロジェクト(ディレクトリ)で利用可能
• パッケージは指定したルートの先のnode_modulesに保存される
• 保存先は変更可能
ローカルインストール • パッケージはインストールした作業ディレクトリで利用可能
• 作業ディレクトリのnode_modulesに保存される		 
グローバルインストール
$ npm install -g パッケージ名

ローカルインストール
$ npm install パッケージ名

複数インストールする際は半角スペースあける

$ npm install パッケージ名 パッケージ名

パッケージのバージョンを指定していする際は@をつけて指定する

$ npm install パッケージ名＠バージョン

インストールのオプションとショートカット

  • インストールの際オプションを指定することで本番環境用、開発環境用など区別して保存可能
  • package.jsonのdependencies → 本番環境用
  • package.json の devDependencies → 開発環境用
  • 本番環境用はプロジェクト複製の際にnpm installコマンドでインストールされる
  • 開発環境用のパッケージは複製の際npm installコマンドでインストールされるが、インストールの際に--production オプションを指定するとインストールされない
オプション ショートカット 説明
--save -S • packahge.json の dependenciesに保存される
• prodはprodaction (本番環境) の意味をもつ
--save-dev -D • package.json の devDependencies に追加される
• devはdevelopment (開発環境) の意味をもつ

インストール先の確認

グローバルインストール先確認
$ npm root -g 

ローカルインストール先確認
$ npm root

インストールされているパッケージの確認

グローバルインストールを確認したい場合
$ npm list -g --depth=0

ローカルインストールを確認したい場合
$ npm list

アンインストール方法

コマンド ショートカット
uninstall un
remove rm

※ 以下removeでも可能

//グローバルインストールのパッケージをアンインストール
$ npm uninstall -g パッケージ名
$ npm un -g パッケージ名

//ローカルインストールのパッケージをアンインストール
$ npm uninstall パッケージ名
$ npm un パッケージ名

//dependenciesからアンインストールする場合
$ npm uninstall --save　パッケージ名
$ npm uninstall -S　パッケージ名

//devDependenciesからアンインストールする場合
$ npm uninstall --save-dev パッケージ名
$ npm uninstall -D パッケージ名

npm installでできること

  • node_modelesのインストール(プロジェクトを手元の環境で動かす際に必要)
  • package.jsonに記載されているパッケージをインストール
  • package-lock.jsonでバージョンを指定していなければ最新バージョンがインストールされる
  • コピー元のバージョンと同一のものを使いたい場合package-lock.jsonでバージョン指定する
$ npm install

package.jsonの作成(初期化)

  • npm initでパッケージに関する情報が記述されているpackage.jsonが作成される
  • 生成される際にプロジェクトについて、初期情報を設定する
$ npm init

質問に答えていき、答えた内容のpackage.jsonが作成される

$ npm init 
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
 
See `npm help json` for definitive documentation on these fields
and exactly what they do.
 
Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.
 
Press ^C at any time to quit.
package name: プロジェクト名  
version: (1.0.0)  
description:  
entry point: (index.js)  
test command:  
git repository:  
keywords:  
author:  
license: 


{
  "name": "プロジェクト名",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": 
}

package.json

  • インストールされたパッケージのバージョン情報が記載される
  • バージョン管理、編集が可能
各項目 説明
name 名前
version バージョン
description 説明
main エントリポイント
scripts コマンドで実行するスクリプト
keywords パッケージ検索に使用されるキーワード
author 制作者
license ライセンス
dependencies • 本番環境で使用すパッケージの一覧
• npm install [オプションなし　または　--save-prod]を実行した際に追加される
devDependencies • 開発環境で使用するパッケージの一覧
npm install [--save-dev]を実行した際に追加される

package-lock-json

  • npm installはpackge-lock.jsonが存在する場合これを元にパッケージをインストールする
  • プロジェクトを複製(共同開発、クローン)する際に、複製先と同一のバージョンを使用したい際に指定する
  • packge-lock.jsonが存在しない場合package.jsonを元に最新のパッケージのバージョンがインストールされる

npm-scripts

  • package.jsonのscriptsの項目で実行したい処理を指定できる
  • 実行するコマンドとそのコマンドで実行したい処理を記載する

→公式ドキュメント　scripts
→Node.jsユーザーなら押さえておきたい npm-scriptsのタスク実行方法まとめ

npmの設定を確認する方法

//環境設定確認
$ npm config --global list

//設定全て表示
$ npm config ls -l

グローバルインストール先の変更の仕方

①インストール先確認

グローバルインストール先ファイル確認
$ npm config --global get prefix

②設定ファイルの書き換え

上書きしたい場合は>　追記したい場合は>>

$ npm config set --global prefix= インストールしたい場所のパス
または
$ echo "prefix = インストールしたい場所のパス" >> ~/.npmrc

③global.module.pathsの確認

//Node.jsのglobal.module.paths確認
$ node
> global.module.paths

※Node.jsのglobal.module.pathsの中にnpm root -gのパスが登録されていなければ通す必要があります。
Node.jsのglobal.module.pathsにパスがなかった時、下の記事を参考にしてみてください。
→Node.js グローバルインストールでハマった

.npmrc

  • npmの設定ファイル
  • npmは、コマンドライン、環境変数などnpmrcファイルから設定を取得する
  • npm configコマンドを使用してnpmrcファイルの内容を更新・編集が可能
現在の設定を確認
$ npm config --global list

デフォルトの設定全て表示
$ npm config ls -l

.npm

  • ファイルのキャッシュ管理

→公式ドキュメント npmrc
→project毎のnpmコマンドをいい感じにするnpmrc & config達

参考記事

npm の基本的な使い方
npmについてのまとめ
npmのあまり知られてない機能 10選
初めてのnpm パッケージ公開
Resolving EACCES permissions errors when installing packages globally
npm -g で グローバルじゃなくてユーザー空間を使う
npmパッケージのインストール場所を変える方法

Discussion