WEB制作の学習やアプリ開発を進める中で、初めてnpmに触れる時、直感的にわかりづらいこととても多いと思います。
私がnpmに触れた時にいろいろ疑問に思ったことをまとめます。
パッケージの検索はどうやる？
npmjsでnpmで公開されているパッケージを検索することができます。
package.jsonって何？
npmパッケージの設定等を記述するJSON形式のファイルです。
パッケージを作成してnpmjsに公開するのであればしっかり設定する必要がありますが、WEB制作・アプリ開発等でライブラリを使用するだけであれば、とりあえずは次に紹介するキーの設定方法さえ押さえておけばOKです！
dependencies
制作物に含めるパッケージを記述します。
WEB制作の場合はほとんど利用することはないと思いますが、アプリ開発の場合、ライブラリとして使用するものを記述します。
記述するといっても、
> npm install パッケージとするだけで、該当プロジェクトのpackage.jsonに
{
...
"dependencies": {
"パッケージ": "^1.0.0" }
...
}と自動で更新されます。
これにより、このプロジェクトが依存するパッケージを示すことになります。
devDependencies
制作物には含めないが、開発中に使用するパッケージを記述します。
WEB制作で使用するパッケージはほとんどここに記述することになります。
パッケージをインストールするとき、
> npm install --save-dev パッケージとすると、該当プロジェクトのpackage.jsonが次のように更新されます。
{
...
"devDependencies": {
"パッケージ": "^1.0.0" }
...
}peerDependencies
通常あまり気にすることはありませんが、プラグインモジュール等、他のパッケージありきで、プラグインとして使用される前提のようなパッケージにおいて、peerDependenciesに相方となるパッケージを指定します。
アプリ開発してる時、パッケージを探してたらたまーにこのキーワードに出くわします。
依存パッケージのバージョン？
インストールしてdependencies等に記述されたパッケージの値としてバージョンコードのような数字の羅列があります。
{
"devDependencies": {
"sass": "^1.64.1" ...
},
...
}これはインストールされているパッケージのバージョンを示しているものではなく、パッケージを更新する際に受け入れることの出来るバージョン範囲を示しています。
この項目の説明の前にまずはバージョニングについてです。パッケージのバージョンは大体1.2.3のような数字で構成されていますが、これはそれぞれ、
メジャーバージョン.マイナーバージョン.パッチバージョンという風になっています。
パッケージを開発する側は、アップデートの際に
- 軽微なバグの修正等はパッチバージョンをインクリメント
- 下位互換性のある新機能追加等はマイナーバージョンをインクリメント(パッチは0へ)
- 下位互換性のないアップデートはメジャーバージョンをインクリメント(マイナー・パッチは0へ)
という風にバージョニングします。
対して、先のdependencies等のインストールしたパッケージに対する値にはバージョンコードの頭に^(キャレット)が付いています。
{
"devDependencies": {
"sass": "^1.64.1" ...
},
...
}上の例ではメジャーバージョン1は固定で、マイナー・パッチのアップデートは許容する意味合いになります。
公開されているパッケージは日々細かなバグの修正や機能の追加などが行われており、後述するnpm updateなどで更新を反映することができます。
しかし、パッケージ更新で、下位互換性のない更新を受け入れてしまったりした場合、それまで使えていたコードやコマンドが使用不可になってしまう可能性があります。
このような事態を防ぐために受け入れる事の出来るバージョン範囲を設定しており、多くはメジャーバージョンのアップデートを除く全てのような指定となっています。
バージョン範囲を表す構文としては主に次のものがあります。
| 構文 | 説明 |
|---|---|
^A.B.C | 一番左のゼロ以外のバージョンを固定し、変更を許可します |
~A.B.C | マイナーバージョンの指定がある場合はパッチの更新を許可し、マイナーの指定がない場合はマイナーまでの更新を許可します。 |
A.B.X | X、x、*を使用して、任意の数値を受け入れます |
<A.B.C | <、<=、>、>=、=を使用してバージョンの範囲を指定します |
例として次のようになります。
^1.2.3→1.2.3から2.0.0未満まで^0.1.2→0.1.2から0.2.0未満まで~1.2.3→1.2.3から1.3.0未満まで~1.2→1.2.3から1.3.0未満まで~1→1.0.0から2.0.0未満まで1.2.x→1.2.0から1.3.0未満まで1.x→1.0.0から2.0.0未満まで<1.2.3→1.2.3未満>=1.2.3→1.2.3以上
package-lock.jsonって何？
package.jsonに記述されているものは依存するパッケージと、受け入れ可能なバージョンでしたか、こちらのファイルに記述されているものは、実際にインストールされている全てのパッケージのバージョンが記載されています。
通常は直接編集することはありません。
プロジェクトのルートでnpm installすると、package.jsonの受け入れ可能なバージョンに従い最新のものをインストールしますが、npm ciとすると、一旦node_modulesフォルダを削除してから、package-lock.jsonのバージョン情報に基づきインストールをします。
これはGitクローンするなどした後で、インストールされいてるパッケージを完全再現する際に便利です。
node_modulesって何？
インストールしたパッケージが入っているフォルダです。
通常は直接編集することはありません。
npm コマンド
npmコマンドは色々ありますが、特によく使うものについてピックアップします。
初期化
initで対話形式でpackage.jsonを作成します。
> npm init対話が面倒くさい時は-yesまたは-yオプションで全てデフォルト設定でpackage.jsonを作成できます。
> npm init -yes
> npm init -yパッケージのインストール
package.jsonに記述されているdependencies、devDependencies等に記載されている依存関係をローカルインストールしたい場合はinstallを実行します。省略形としてiでもOK。
但し、このインストールを実行すると、package.jsonの受け入れ可能なバージョンの最新版をインストールしするので、package-lock.jsonが更新されてしまうことがあります。(基本的にはそこまで問題にはならないはずです)
> npm install
> npm ipackage-lock.jsonを元にローカルインストールしたい場合はciを実行します。
> npm ciパッケージを指定してローカルインストールしたい場合はinstall パッケージ名とする。これを実行すると、自動的にpackage.jsonのdependenciesに記載されます。また、該当のパッケージが依存するパッケージもインストールされます。
> npm install パッケージ名package.jsonのdevDependenciesに記載してローカルインストールしたい場合は--save-devオプションを追加します。省略形として-DでもOK。
WEB制作で使用するパッケージは、開発時に使うものがほとんどなので、大体このオプションを付けてインストールすることになります。
> npm install --save-dev パッケージ名
> npm install -D パッケージ名グローバルインストールしたい場合は--globalオプションを追加する。省略形として-gでもOK。
> npm install --global パッケージ名
> npm install -g パッケージ名パッケージのアンインストール
ローカルインストールされたパッケージを削除したいときはuninstallを実行します。その他、un、remove、r等でもOK。
> npm uninstall パッケージ名
> npm un パッケージ名
> npm remove パッケージ名
> npm r パッケージ名パッケージの削除を実行すると、package.jsonのdependenciesや、devDependenciesの記述や、package-lock.jsonの記述も削除されます。もしpackage.json等から削除したくない場合は--no-saveオプションを追加します。
> npm uninstall --no-save パッケージ名グローバルインストールされたパッケージを削除したい場合は--globalオプションを追加します。
> npm uninstall --global パッケージ名インストールされているパッケージ一覧
プロジェクトにローカルインストールされているパッケージを確認したい場合はlsを実行します。
> npm ls次のような感じでコンソールに出力されます。
env@1.0.0 C:\Users\katsu\Desktop\env
+-- autoprefixer@10.4.15
+-- browser-sync@2.29.3
+-- chokidar-cli@3.0.0
+-- htmlhint@1.1.4
+-- imagemin-giflossy@5.1.10
+-- imagemin-gifsicle@7.0.0
+-- imagemin-jpegtran@7.0.0
+-- imagemin-keep-folder@5.3.2
+-- imagemin-pngquant@9.0.2
+-- imagemin-svgo@10.0.1
+-- imagemin-webp@8.0.0
+-- postcss-cli@10.1.0
+-- postcss@8.4.29
+-- pug-cli@1.0.0-alpha6 (git+ssh://git@github.com/pugjs/pug-cli.git#0eb8d37c5a38cb297cf09361631b93312e0dfa21)
+-- rimraf@5.0.1
`-- sass@1.64.1インストールされているパッケージ依存しているパッケージを全て確認したい場合は--allオプションを追加します。
> npm ls --all次のように出力されます。インストールしているパッケージによってはかなり長くなります。
env@1.0.0 C:\Users\katsu\Desktop\env
+-- autoprefixer@10.4.15
| +-- browserslist@4.21.10
| | +-- caniuse-lite@1.0.30001525 deduped
| | +-- electron-to-chromium@1.4.508
| | +-- node-releases@2.0.13
| | `-- update-browserslist-db@1.0.11
| | +-- browserslist@4.21.10 deduped
| | +-- escalade@3.1.1 deduped
| | `-- picocolors@1.0.0 deduped
| +-- caniuse-lite@1.0.30001525
| +-- fraction.js@4.3.5
| +-- normalize-range@0.1.2
| +-- picocolors@1.0.0
| +-- postcss-value-parser@4.2.0
| `-- postcss@8.4.29 deduped
.
.
.ls パッケージ名とすろと、指定したパッケージに依存するパッケージ一覧が出力されます。
> npm ls chokidarenv@1.0.0 C:\Users\katsu\Desktop\env
+-- browser-sync@2.29.3
| `-- chokidar@3.5.3
+-- chokidar-cli@3.0.0
| `-- chokidar@3.5.3 deduped
+-- postcss-cli@10.1.0
| `-- chokidar@3.5.3 deduped
`-- sass@1.64.1
`-- chokidar@3.5.3 dedupedグローバルインストールされているパッケージを確認したい場合は--globalオプションを追加します。
> npm ls --globalインストールされているパッケージの最新版の確認
ローカルにインストールされたパッケージの更新の必要があるか調べたいときは、outdatedを実行します。
> npm outdated次のようにコンソールに出力されます。
Package Current Wanted Latest Location Depended by
sass 1.64.1 1.67.0 1.67.0 node_modules/sass envCurrentが現在インストールされているバージョン、Wantedがpackage.jsonで指定された受け入れ可能な最新バージョン、Latestが公開されている最新バージョンになります。
グローバルにインストールされたパッケージの更新の必要があるか調べたいときは、--globalオプションを追加します。
> npm outdated --globalインストールされているパッケージの更新
公開されているパッケージは日々細かなバグの修正や機能の追加などが行われています。インストールされているパッケージを更新し、それらを反映することができます。
ローカルインストールされているパッケージを全て更新したい場合はupdateを実行します。省略形としてup、upgradeでもOK。
更新されるバージョンは先述のpackage.jsonに記載されている受け入れ可能なバージョン情報に従います。
> npm update
> npm up
> npm upgradeローカルインストールされているパッケージを単体で指定して更新したい場合はパッケージ名を指定します。
> npm update パッケージ名グローバルにインストールされたパッケージを更新したい時は、--glolbalオプションを追加します
> npm update --global パッケージ名パッケージが全て最新版に更新されるていると、outdatedを実行しても何も出力されません。
脆弱性の確認
インストールされているパッケージに脆弱性がないか調べたいときはauditを実行します。
> npm audit問題が見つかると次のようにコンソールに出力されます。lowからcriticalに行くほど重大度が大きくなります。
...
39 vulnerabilities (1 low, 13 moderate, 19 high, 6 critical)
To address issues that do not require attention, run:
npm audit fix
To address all issues possible (including breaking changes), run:
npm audit fix --force
Some issues need review, and may require choosing
a different dependency.詳細は省略しますが、要は問題が見つからない状態であればOKです。
問題を修正するにはaudit fixを実行すると、互換性のある更新を行ってくれます。
> npm audit fixまとめ
コマンドについては、一度環境構築してしまうとあまり使う機会が多くないのでどうしても忘れがちです。
忘れてしまったときはまた見に来てください(笑)