39. A Beginner’s Guide to npm — the Node Package Manager

Tatsuya Asami
11 min readAug 21, 2018

--

【所要時間】

1時間57分(2018年8月21日)

【概要】

npmの使い方について

【要約・学んだこと】

Node.jsはサーバー上でJSアプリを書くことを可能とする。元々はアプリのサーバー環境のためだったが、ディベロッパーはこれを使ってローカルタスクの自動化を支援するツールを作った。それ以来、Node-baseのツール(Grunt, Gulp, Webpackなど)新しいエコシステムが進化し、フロントエンド開発を変えた。

ここではローカルモード、グローバルモードでパッケージのインストール、消去の仕方、特定のパッケージのバージョンのアップデートやインストールの方法といったnpmの基本動作を学ぶ。また、package.jsonでプロジェクトのdependencyを管理する方法も学ぶ。

Installing Node.js

前項でやった。現在のnodeとnpmの保存場所とバージョンは下記の通り。

Tats-MacBA-4:~ AsamiTasuya$ which node
/usr/local/bin/node
Tats-MacBA-4:~ AsamiTasuya$ node — version
v10.9.0
Tats-MacBA-4:~ AsamiTasuya$ which npm
/usr/local/bin/npm
Tats-MacBA-4:~ AsamiTasuya$ npm — version
6.2.0

Node Packaged Modules

npmはローカルモード、グローバルモードのパッケージをインストールできる。ローカルモードのパッケージは、親ディレクトリのnode_modules フォルダにインストールする。この場所は現在のユーザーに所有されている。
グローバルパッケージはroot{prefix}に所有されている{prefix}/lib/node_modules/にインストールする。そのため、グローバルにインストールするにはsudoコマンドでパーミッションを変更することがが必要。

Changing the Location of Global Packages

npm config list でnpmの情報が出力できる。また、npm config get prefixで現在の場所がわかる。その他色々やるとglobal packagesの場所を変更できる。

Installing Packages in Global Mode

現在1つのパッケージだけをグローバルに持っている。これはnpmパッケージ自体だ。それを変更し、 UglifyJS (a JavaScript minification tool) をインストールするる。 — global フラグを使うが、これを-gに省略することができる。

$ npm install uglify-js --global
/home/sitepoint/.node_modules_global/bin/uglifyjs -> /home/sitepoint/.node_modules_global/lib/node_modules/uglify-js/bin/uglifyjs
+ uglify-js@3.0.15
added 4 packages in 5.836s

出力からわかるように、アディショナルパッケージがインストールされた。これらがUglifyJS’s dependenciesだ。

Listing Global Packages

npm list --global コマンドでglobal packageのリストを見ることができる。

Installing Packages in Local Mode

npm init コマンドで、ローカルパッケージのpackage.json fileを作成。

npm init --y ですぐにpackage.jsonファイルは作れる。

フィールドはmainとscriptsをのぞくのがわかりやすい。mainフィールドはプログラムの主要なエントリポイントで、scriptsフィールドでは、パッケージのライフサイクルの様々時点で実行されるスクリプトをコマンドで指定できる。

続いて npm install underscore コマンドでUnderscoreをインストール。

package.jsonのdependenciesに、underscoreのバージョンと同じ1.91が追加された。

Managing Dependencies with package.json

見ての通りUnderscore v1.91がプロジェクトにインストールされた。^がバージョンの数字の前に作られた。これはインストール時に、npmがパッケージの最高バージョンを取得し、メジャーバージョンのみが一致しなければいけない場所にある。(package-lock.jsonファイルが存在しなければ)
この場合、v2.00より低ければ良い。dependencyのバージョン管理(major.minor.patch)はsemantic バージョニングと呼ばれる。

また、Underscoreがdependenciesフィールドのプロパティとしてセーブされた。これは最新のnpmバージョンでデフォルトとなり、アプリケーションの実行に必要なパッケージ(Underscoreなど)に使われる。--save-dev flagを指定することで、devDependencyとしてパッケージをセーブすることも可能。devDependenciesは、テストランニングやトランスピリングコードといった開発目的で使われるパッケージだ。

また、private: true を package.jsonに加えることで、プライベートレポジトリの偶発的な発行を防ぎ、npm installジッッ工事に作成される警告を抑制することができる。

package.jsonを使い、プロジェクトのdependencyを指定する最大の目的は、移植性だ。例えば、誰かのコードを複製するとき、プロジェクトルートでnpm i コマンドを実行するだけで、npmはアプリを実行するのに必要なパッケージ全てを読み込み、解決する。

Underscoreが動作しているテストをする。test.jsをプロジェクトのルート ディレクトリに作成する。プロジェクトのコードは

const _ = require('underscore');
console.log(_.range(5));

だ。これをnode test.jsで実行すると、 [0, 1, 2, 3, 4] という結果になる。

Uninstalling Local Packages

npmはパッケージマネージャなので、削除もできなければならない。

npm uninstall underscore コマンドで削除できる。

上記のように

package.jsonからunderscoreのバージョンが消えた。

Installing a Specific Version of a Package

欲しいバージョンのunderscore packageをインストールすることもできる。

npm install underscore@1.8.2 とコマンド入力すると(1.8.2は欲しいバージョン)

v1.8.2がインストールできた。

Updating a Package

Underscore packageの更新ができるかどうかチェックする。

npm outdated コマンドを入力。

Currentがローカルにインストールされている現在のバージョン(1.8.2)、Latest(1.9.1)が最新バージョン、そしてWanted(1.9.1)が現在のコードを壊すことがないパッケージの最新のバージョンになる。

dependencyはプロジェクトがインストールされている全てのマシンで同じままとなる。package-lock.jsonファイルは、npmがnode_modulesフォルダか、package.jsonファイルを自動で修正する操作に対して、自動的に生成される。

最新のバージョンのUnderscoreが以前に持っていたバグを修正したので、パッケージをそのバージョンに更新したいとしよう。

その場合 npm update underscore コマンドで、アップデートする。また、Underscoreはpackage.jsonのdependencyとしてリストにされる。もしアップデートしたい最新モジュールがたくさんあるなら、npm updateを実行しても良い。

Searching for Packages

npm search mkdir で、mkdirを探すことができる

Re-installing Project Dependencies

もう1つパッケージをインストールする。

package.jsonはdependency listが自動で更新された。

もしpackage.jsonにセーブすることなくパッケージをインストールしたければ — no-save argumentを使う。

プロジェクトのソースコードを別のマシンにクローンするなら、dependencyをインストールする。node_modulesフォルダを消去し、npm installを実行する。

node_modulesフォルダをみると、再び作成されているのがわかる。この方法で、プロジェクトとソースレポジトリのdependencyを解消しすることなしにコードを他人と簡単にシェアできる。

Managing the Cache

npmはパッケージをインストールするときにコピーを保持するので、次にそのパッケージをインストールするときに、ネットワークにヒットする必要はない。コピーはホームパスの .npm ディレクトリにキャッシュされる。

npm cache cleanでクリーンアップできる。

クリーンアップするシステム上に複数のnodeプロジェクトがあるなら、ワークスペースからnode_moduleフォルダーを削除することもできる。

find . -name "node_modules" -type d -exec rm -rf '{}' +

Aliases

  • npm i <package> – install local package
  • npm i -g <package> – install global package
  • npm un <package> – uninstall local package
  • npm up – npm update packages
  • npm t – run tests
  • npm ls – list installed modules
  • npm ll or npm la – print additional package information while listing modules

また、一度で複数のパッケージをインストールすることもできる。

$ npm i express momemt lodash mongoose body-parser webpack

npm help コマンドで、一般的なnpm コマンドのリストを見ることができる。

さらに詳しくは10 Tips and Tricks That Will Make You an npm Ninja. 参照。

Version Managers

いくつかのツールを使えば同じマシンで複数のNode.jsのバージョンを管理することが可能。 nnvm (Node Version Manager).だ。詳しくは、Install Multiple Versions of Node.js using nvm.

Conclusion

このチュートリアルでnpmの基本をカバーしたが、より詳しく学びたければ npm Github releases page 参照。

【わからなかったこと】

特になし

【感想】

一文が短くて読みやすかった。

--

--

Tatsuya Asami
Tatsuya Asami

Written by Tatsuya Asami

Front end engineer. React, TypeScript, Three.js

No responses yet