Help us understand the problem. What is going on with this article?

備忘録_npm再入門

More than 3 years have passed since last update.

なんとなくの部分を文書化して知識整理

npmのヴァージョン確認

npm -v

パッケージインストール & アンインストール

アプリケーション用にインスール

カレントディレクトリに「node_modules」というディレクトリが作成される。
※インストールされたパッケージは「node_modules」ディレクトリに格納される

// インストール
$ npm install <パッケージ名>

// アンインストール
$ npm install <パッケージ名>

グローバルインストール

グローバルにインストールされる
npm install -g <パッケージ名>でインストールされたパッケージは「package.json」に 記述されない

// グローバルインストール
$ npm install -g <パッケージ名>

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

一括インストールのフロー

  1. 設定ファイルの作成

「package.json」というファイルが作成される
※色々聞かれるがとりあえずenterでおk

// 通常設定
$ npm init

// 項目にデフォルト設定を適用
$ npm init -y
  1. パッケージインストール + package.jsonへヴァージョン情報を記載

必要に応じでインストールするパッケージを--save-devで対応していくことで、
package.jsonに自動的に記述されていく

$ npm install <パッケージ名> --save-dev
  1. 一括インストール

パッケージ情報が記述されているpackage.jsonがある状態で、
下記コマンドを実行することで一括インストールされる

$ npm install

インストール済みのパッケージを確認

// アプリケーションごと
$ npm list

// 1階層目だけを表示させたい時
$ npm list -depth=0

// グローバル
$ npm list -g

パッケージ管理

// 対象パッケージのHPへ
$ npm home <パッケージ名>

// 対象パッケージのリポジトリへ
$ npm repo <パッケージ名>

// 対象パッケージのドキュメント
$ npm docs <パッケージ名>

// バグ一覧(現在)
$ npm bugs <パッケージ名>

// パッケージのアップデートの確認
$ npm outdated

// グローバルにパッケージを確認
$ npm outdated -g

// パッケージに関するもろもろ確認
$ npm view <パッケージ名>

// パッケージの現ヴァージョンとヴァージョン履歴の確認
$ npm view <パッケージ名> versions

オプションに関しての補足

--save

--saveオプションを実行するとpackage.jsonの「dependencies」に記載される。
「dependencies」に記載されているパッケージはnpm installした際に インストールされる。

$ npm install <パッケージ名> --save

$ npm uninstall <パッケージ名> --save

--save-dev

--save-devオプションを実行するとpackage.jsonの「devDependencies」に記載される。
「devDependencies」に記載されているパッケージはnpm installした際に インストールされない。

注意点

package.jsonを含むディレクトリ全体をGitHubなどからcloneして開発する場合、package.jsonのあるディレクトリでnpm installを実行すると「devDependencies」も特例的?にインストールされる。
※依存関係もインストールで対応する

$ npm install <パッケージ名> --save-dev

$ npm uninstall <パッケージ名> --save-dev

「dependencies」と「devDependencies」の使い分け

  • 「dependencies」 : 実行時に必要になるもの
  • 「devDependencies」: ビルド系ツール

パッケージの検索/確認

// 検索
$ npm search <パッケージ名>

// 詳細表示
$ npm show <パッケージ名>

パッケージを探す

npmコマンドのショートカット

  • npm i => npm install
  • npm r => npm uninstall
  • npm i -S => npm install --save
  • npm i -D => npm install --save-dev
  • npm i -g => npm install -global

npm関連のパスの確認コマンド

// ローカルインストール先のディレクトリ確認
$ npm root

// ローカルインストール先の、コマンドディレクトリ(bin)確認
$ npm bin

// グローバルインストール先のディレクトリ確認
$ npm -g root

// グローバルインストール先の、コマンドディレクトリ(bin)確認
$ npm -g bin

依存オブジェクトのバージョンを固定

  • ^ : バージョンアップは可能※メジャーアップデートは不可
  • ~ : マイナーバージョンアップのみ

shrinkwrapコマンド

使用中の依存オブジェクトのバージョンが記述された「npm-shrinkwrap.json」ファイルが作成される。
「npm-shrinkwrap.json」ファイルが存在する場合はデフォルトとして使わる。
npm installしたときには「package.json」を無視します。

$ npm shrinkwrap

-gを使わないという選択肢

コマンドのパスを通す。
-gでインストールすることでコマンドとして利用できるようになるがそれを避けるためにパスを通す

~/.zshrcなど
export PATH=$PATH:./node_modules/.bin

node_modulesディレクトリのbinディレクトリにパスを通すことで-gしなくてもコマンド使用可能。

correct機能の対応

gulp用にコマンドを通すことでグローバルにインストールしなくてもコマンドが使用できるようになるが、zshのcorrect機能がうざかったので解除(※環境がzsh)

一応やり方メモ

aliasに「nocorrcet」を設定
※あとは適当に順次追加すればおk

// gulpコマンドの場合
alias gulp='nocorrcet gulp'

参考にさせていただいているサイト様

https://www.webprofessional.jp/10-npm-tips-and-tricks/
http://qiita.com/Mic-U/items/cd456d6bea72937464f8

y_sekitoba
異業種からweb業界へ転職。 基本的に備忘録がメインです。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした