全部知ってる? npmを使いこなすために絶対知っておきたい10のこと

2016/12/13

Craig Buckler

394

Articles in this issue reproduced from SitePoint
Copyright © 2016, All rights reserved. SitePoint Pty Ltd. www.sitepoint.com. Translation copyright © 2016, KADOKAWA ASCII Research Laboratories, Inc. Japanese syndication rights arranged with SitePoint Pty Ltd, Collingwood, Victoria,Australia through Tuttle-Mori Agency, Inc., Tokyo

知っておくと便利なnpm(Node Packaged Modules)のコマンドとTipsを全部で10本まとめました。

Facebookの新しいYarn projectには興奮を覚える一方で、Node.jsの躍進にはオリジナルパッケージであるnpmの存在が大きく貢献しています。

少ないnpmのコマンドで、初期化したり(npm init)、パッケージをダウンロードしたり(npm install)、テスト(npm test)したり、プロジェクト内でカスタムスクリプト(npm run)を作ったりできます。少し詳しく調べていけば、日々の開発を劇的に変えてくれるさまざまなコマンドがnpmには用意されています。

注意:もしnpmの手引きが必要なら『A Beginner’s Guide to npm — the Node Package Manager』をチェックしてください。npmとYarnの違いについて知りたいなら『Yarn vs npm: Everything You Need to Know』を参照してください。

1. Help機能

npmオンラインヘルプCLI Command documentationは親切で分かりやすいですが、ブラウザーで開くのが面倒なときもあります。すべてのオプションは以下のコマンドで確認できます。

npm help

特定のコマンドのヘルプは以下で表示できます。

npm help <command>

たとえば、npm help installのように使います。以下のような短縮コマンドもあります。

npm <command> -h

2. オートコンプリート機能

Bash for Windows 10も含むnpmは、bashを使ったオートコンプリート機能も提供しています。

npm completion >> ~/.bashrc

もしくはZシェルもあります。

npm completion >> ~/.zshrc

たとえば、以下のようにシェルの設定ファイルをリロードしてください。

source ~/.bashrc

たとえば、npm insと入力してTABを押すとinstallが現れます。すべてのコマンドをタイプして時間を無駄にする必要はありません。

3. グローバルモジュールのパーミッション変更

Linuxのようなシステムでは、グローバルのパッケージをインストールしたときにパーミッションエラーが起こる場合があります。sudoコマンドを使えば回避できますが、危険な選択でもありす。もっと良い回避策は、npmのデフォルトディレクトリを自分の権限があるディレクトリに変えることです。

mkdir ~/.npm-global
npm config set prefix '~/.npm-global'

使っているテキストエディターに合わせて、以下のように~/.bashrc~/.zshrcを付け足します。

export PATH="$HOME/.npm-global/bin:$PATH"

シェルの設定ファイルをリロード(source ~/.bashrc)して、npmを自分のディレクトリに再インストールします。

npm install -g npm

同時に、npmは最新バージョンにアップデートされます。

4. npmを最新に保つ

次のコマンドでnpmのバージョンが確認できます。

npm -v

もし必要なら、次のようにアップデートします。

npm install -g npm

Nodeの新しいメジャーバージョンがリリースされたときは、以下でC++のアドオンをリビルドする必要があるかもしれません。

npm rebuild

さらに、Node.jsやnpmの複数バージョンを管理しする場合、nvmnといったオプションを使う必要があります。オプションについては『Quick Tip: Install Multiple Versions of Node.js using nvm』を参照してください。

5. npmのデフォルト設定を活用する

npm initコマンドで新規プロジェクトフォルダーが作成されます。プロジェクトの詳細情報が表示され、package.jsonも新規作成されます。

プロジェクトを新規追加するときに、毎回同じ情報を入力することにうんざりしているなら、-yフラグを使って多くの項目をデフォルト設定にできます。

npm init -y

または、いくつかのデフォルト値は任意にセットできます。

npm config set init.author.name <name>
npm config set init.author.email <email>

6. 洗練されたパッケージ検索

執筆時点で、npmでは35万を超えるパッケージがあり、日々増え続けています。すばらしいものが数多くある一方で、不人気のものやバグのあるもの、長続きしないものもあり、選択は至難の業です。npmjs.comGitHubで探すことが現実的ですが、ほかにもいろいろな選択肢があります。

npms

npmsは、プロジェクトのバージョン、ダウンロード数、最新の更新日、コミット頻度、カバレッジ、ドキュメント、コントリビューター数、イシュー数、フォーク数、作者のコミュニティにおける位置づけに基いて、パッケージの質をスコアで算出してランク付けしています。

npm Discover

npm Discoverを使えば、あるパッケージと一緒によく使われているパッケージを見つけられます。たとえば、Expressではbody-parserが該当します。

Packages by PageRank

Packages by PageRankはGoogleのページランクと連動してnpmのパッケージを探し、ソートしてくれます。

Curated npm Lists

誰かの「まとめ」を活用する手もあります。私は確実な方法として、よくsindresorhusAwesome Node.jsを参考にします。

7. パッケージを管理する

パッケージを選んで、依存オブジェクトまでインストールしたら、なにを入れたかを以下で確認できます。

npm list

lslalllistのエイリアスとして使えます。

リストは、パッケージ、サブパッケージ、サブパッケージのサブパッケージなどすべてを表示してくれます。もし一番上の階層のパッケージだけ表示させたい場合は、以下のように制限できます。

npm list --depth=0

パッケージのホームページは以下で開けます。

npm home <package>

上記コマンドで、もしOSサーバー版ならホームページは開けません。同様に、パッケージのGithubレポジトリも開けます。

npm repo <package>

ドキュメントも開けます。

npm docs <package>

現在のバグの一覧も開けます。

npm bugs <package>

無関係のパッケージをインストールしたとき、npm listは知らせてくれますが、package.jsonファイルは参照していません。npm uninstallで個別に取り除くか、以下ですべて取り除けます。

npm prune

もし、--productionフラグを加えたり、環境変数のNODE_ENVproductionにセットすれば、パッケージはpackage.jsondevDependencies(開発時に必要なパッケージ)を特定して、取り除きます。

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

デフォルトでnpmは、 --save--save-devでパッケージをインストールするとき(^)が付いたバージョン番号を参照します。そのパッケージのメジャーバージョンの番号を固定します。たとえば、^1.5.1はそのバージョン以降のバージョンアップを許可しますが、npm updateしても2.0.0以降にはなりません。

より保守的なチルダ(~)はパッケージをマイナーバージョンで制限します。たとえば、~1.5.1とすれば、npm updateしたときにマイナーバージョンアップならしますが1.6.0以降にはなりません。このチルダのプリフィックスはデフォルトとして以下のように設定できます。

npm config set save-prefix="~"

どのようなアップデートでもシステムを壊す危険があると考えている用心深い人は、以下のように設定することでバージョンを固定できます。

npm config set save-exact true

もしくは、shrinkwrapコマンドも使えます。

npm shrinkwrap

このコマンドによって、使っている依存オブジェクトのバージョンが記述されたnpm-shrinkwrap.jsonファイルが生成されます。あとは、このファイルがデフォルトとして使われ、npm installしたときにはpackage.jsonを無視します。

9. 更新されたモジュールを見つける

どうすれば依存オブジェクトが更新されたタイミングが分かるでしょうか。ここ数カ月、私が実践していたのは、依存オブジェクトのリストを表示して(npm list --depth=0)、npmjs.comでそのパッケージを探し、どのバージョンが更新されているかを確認する方法でした。楽しんでやっていましたが、幸いにも、とても簡単な方法があります。

npm outdated

もしくはnpm outdated -gでnpm自体のようなグローバルなパッケージも適用できます。

以下で現在のそれぞれのパッケージのバージョンも確認できます。

npm list <package>

また、現在のバージョンと、バージョンの履歴も次のように確認できます。

npm view <package> versions

npm view <package>はそれぞれのパッケージに関する、依存オブジェクト、キーワード、更新日、コントリビューター、レポジトリ、ライセンスなどすべての情報を表示してくれます。

10. 開発中のパッケージを使う

パッケージを開発中のとき、ほかのプロジェクトで試したり、アプリケーションがサポートしていれば、アプリのディレクトリで実行したい場合があります。そのようなとき、npmに登録してグローバルにインストールする必要はありません。パッケージフォルダーから以下のようにすれば良いだけです。

npm link

このコマンドによって、パッケージのシンボリックリンクがグローバルのフォルダーに作られます。参照も次のコマンドで確認できます。

npm list -g --depth=0

次のような方法もあります。

npm outdated -g

コマンドライン、またはrequireでどのようなプロジェクトにも取り込んでパッケージを実行できます。

たとえば、以下のようにpackage.jsonに依存オブジェクトのファイルパスを宣言しても良いでしょう。

"dependencies": {
  "myproject": "file:../myproject/"
}

以上が、私のお気に入りのnpmで役立つコマンドたちです。

※本記事はVildan SorticMatt BurnettTom Grecoが査読を担当しています。最高のコンテンツに仕上げるために尽力してくれたSitePointの査読担当者のみなさんに感謝します。

(原文:10 Tips and Tricks That Will Make You an npm Ninja

[翻訳:萩原伸悟/編集:Livit

Copyright © 2016, Craig Buckler All Rights Reserved.

Craig Buckler

Craig Buckler

1995年に処女作としてIE2.0でページを作ったイギリス人のフリーランスWebコンサルタントです。以来、スタンダード、アクセシビリティとHTML5のテクニックの伝道者として活躍し、SitePointでは1000以上の記事を書いています。ツイッターのアカウントは@craigbuckler。

Loading...