npmについてまとめました。
npmについて理解すべきことは以下です。
- npmはJavaScript、Node.jsのパッケージ管理システム
- npmを使うことで、パッケージの依存関係を解決して管理できたり、ビルドやテストなどのスクリプトを実行できる
- npmはNode.jsをインストールすることで一緒にインストールされる
- npmの基本的なコマンド
- パッケージをインストールする方法は、npmのコマンドで直接インストールする方法と、
package.jsonに記述してコマンドを実行する方法の２種類ある - パッケージはシステム全体で使えるようにするグローバルインストールと、プロジェクト内で使うためのローカルインストールがある
npm iに--save-devか-Dをつけて実行すると、開発時のみ使うパッケージをインストールし、オプションをつけないと主に本番環境で使うパッケージをインストールするpackage.jsonはnpmの設定ファイルで、プロジェクトの情報や、インストールしたパッケージのリスト、スクリプトなどが記述されるpackage-lock.jsonはインストールされたパッケージのバージョンや依存関係が記述されるファイルで、基本的に直接編集しないpackage-lock.jsonがディレクトリに存在する状態でnpm iを実行することで、パッケージを再現できる- 実際にインストールされたパッケージは
node_modulesに格納される - パッケージをインストールするときのバージョン指定の記法
npxというコマンドを使うことで、ローカルにパッケージがインストールされてなくても一時的にパッケージを実行できる
npmとは
npmとはNode.jsのパッケージ管理システム。JavaScriptでも使えて、ReactやNext.jsなどを使うためにも必須のツール。
パッケージとは、何らかの機能がまとまったものでライブラリともいう。パッケージ管理システムはそれらのパッケージをインストールしたり、削除したりできるツール。
npmを使う目的
npmを使う主な目的は以下のもの。
依存関係とは、Aというパッケージを使うためには別のBやCというパッケージが必要であるというパッケージ同士の関係のこと。
npmが使われる前は必要になるすべてのパッケージを1つずつインストールしなければならなかったが、npmによって依存関係も含めてインストールできるようになった。
インストール
npmはNode.jsをインストールすると一緒にインストールされて使えるようになる。
Node.jsはnodenvというNode.jsをインストールするためのツールを使うのがおすすめ。
nodenvはプロジェクトごとでインストールするNode.jsのバージョンを切り替えることができる。
npmの基本的なコマンド
| コマンド | 意味 |
|---|---|
| npm init | npmを初期化して、package.jsonを作成する |
| npm init -y | npm init実行時に聞かれる質問をスキップして初期化する |
| npm install [package] または npm i [package] | パッケージをインストールする |
| npm i -g [package] | パッケージをグローバルにインストールする |
| npm i --save-dev [package] または npm i -D [package] | 開発時に必要なパッケージをインストールする |
| npm remove [package] | パッケージを削除する |
| npm run [script] | npm scriptを実行する |
| npm update [package] | 特定のパッケージのバージョンを最新の安定版に更新する（package-lock.jsonのバージョンは更新しない） |
| npm upgrade | 全てのパッケージのバージョンを最新の安定版に更新し、package-lock.jsonのバージョンも更新する |
| npm -v | npmのバージョンを確認する |
グローバルインストールとローカルインストール
npmのパッケージをインストールするとき、npm i -gでシステム全体にインストールするグローバルインストールと、npm iでプロジェクト内にインストールするローカルインストールの２種類の方法がある。
基本的にはローカルインストールを使う。
package.jsonとは
package.jsonとは、npmの設定ファイル。
package.jsonはnpm initを実行すると作られる。
デフォルトでは以下の内容で作られる。
{
"name": "react-environment-practice",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
name
nameはプロジェクトの名前を記述する。
version
versionはプロジェクトのバージョンを指定する。
description
descriptionはプロジェクトの説明を記述する。
main
mainはパッケージが外部に公開されたときに、どのファイルがそのパッケージのメインとなるファイルであるかを指定する。
scripts
scriptsはプロジェクトで実行可能なスクリプトを指定する。
npm run [script]とすることで、スクリプトを実行できる。
スクリプトを使うことで、ビルドやテストなどのコマンドを設定して実行することができる。
dependencies
dependenciesはnpm iでインストールしたパッケージが記述される。
devDependencies
devDependenciesはnpm i -Dでインストールした開発時のみに必要なパッケージが記述される。
主にビルドやテスト、デバッグなどに使うパッケージは-Dをつけてインストールする。
keywords
keywordsはプロジェクトに関連するキーワードのリストを指定するためのもの。
author
authorはプロジェクトの作者の名前が記述される。
license
licenceはプロジェクトのライセンスを指定する。
パッケージのバージョンについて
パッケージをインストールするときにはバージョンを指定することができる。記号を使うことでさまざまなバージョンの指定の仕方ができる。
npmのパッケージのバージョンは3つの数字をピリオドで区切る。 3つの数字はそれぞれ[major.minor.patch]という意味を持つ。これをセマンティックバージョンという。
majorは互換性のない大規模な変更が行われた場合に数字が上がる。
minorは後方互換性のある機能の追加や変更が行われたときに数字が上がる。
patchはバグの修正や既存の機能に対する小さな変更などが行われたときに数字が上がる。
# バージョンを指定しないと最新のバージョンがインストールされる npm i yarn # 指定したバージョンがインストールされる npm i yarn@1.0.0 # 指定したバージョンより新しい最新のバージョンがインストールされる npm i yarn@>1.0.0 # 指定したバージョンより古いもので最新のバージョンがインストールされる npm i yarn@<1.0.0 # 指定したバージョン以上の最新のバージョンがインストールされる npm i yarn@>=1.0.0 # 指定したバージョン以下の最新のバージョンがインストールされる npm i yarn@<=1.0.0 # マイナーバージョンが固定された範囲でのインストールを指定する npm i yarn@~1.0.0 # 1.0.0 ~ 1.1.0の中で最新のものがインストールされる # マイナーバージョンとパッチバージョンが固定された範囲でのインストールを指定する npm i yarn@^1.0.0 # 1.0.0 ~ 2.0.0未満の範囲の中で最新のものをインストールする
package-lock.jsonとは
package-lock.jsonはnpm i実行時にインストールしたパッケージのバージョンや依存関係が記述されるファイルで、基本的に触らない。
package-lock.jsonを使ってnpm iでパッケージをインストールすることで、別の環境でも必要なパッケージとバージョンを再現でき、環境を統一できる。
node_modules
node_modulesはnpm i実行時に作成される、インストールしたパッケージが実際に格納されるディレクトリ。
node_modulesはnpm iを実行すると作成できるので、Gitでバージョン管理する場合、.gitignoreファイルにnode_modulesを記述し、Gitの管理から外す。
npx
npxはローカルにインストールされていないパッケージを一時的に実行するコマンド。
# 使用例
npx create-react-app my-app
上記のようにnpxでコマンドを実行することで、create-react-appをインストールせずに使える。
