Edited at

npmでnode.jsのpackageを管理する

More than 5 years have passed since last update.

このTopicはWeb ApplicationのfrontendのProjectを管理するTopicの2つ目です。


  1. node.jsのversionを管理するためにnodebrewを利用する

  2. npmでnode.jsのpackageを管理する

  3. grunt.jsを使って、frontendのビルドを行う

前提条件として、僕の環境はMac OSです。


npmとは?

npmはnode.jsのpackageを管理するためのツールです。

node.js自体はJavaScriptで出来たWeb Serverですが、frontendを管理するためのtoolもたくさんあります。

npmはnode.jsのpackageを管理すためのツールです。

Javaが分かる方は、mavenのようなものだと想像していただければ、分かりやすいかと思います。


npmでpackageをインストールする

npmでpackageをインストールするには、npm installを使います。

オプションなどは公式にありますので、その中からよく使うものをいくつか試してみたいと思います。

書いてあるcommandを実際に実行する場合は、適当な作業ディレクトリを作って、その中で実行するのが良いです。


npm install -g


command

$ npm install -g grunt-cli


-g オプションは指定されたpackageをグローバルな領域にインストールするcommandです。

version関係なく、どのprojectでも利用するようなpackgeをインストールする時に利用します。

上の例だと、grunt-cliをインストールしています。

grunt-cliについては次のTopicで利用しようと思っているpackageですので、今の段階ではそういうpackageをグローバルな領域にインストールされたのだなとだけ思っていてください。


npm init


command

$ npm init

name: (sample) sample
version: (0.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author: sinmetal
license: (BSD) MIT

{
"name": "sample",
"version": "0.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": "",
"author": "sinmetal",
"license": "MIT"
}


npm initは対話形式でprojectの初期設定を行うためのcommandです。

実行すると対話形式で項目を入力して、package.jsonを作成します。

package.jsonはprojectのpackageを管理するためのファイルです。

mavenで言うところのpom.xmlです。

package.jsonはnode.jsのlibraryを公開する時のファイルなので、licenseなどが入ります。

ただ、ここでは公開するlibraryを作っているわけではなく、開発環境としてnpmを使いたいだけなので、ほとんど削除してかまわないでしょう。

適当に項目を削ったのが、以下のpackage.jsonです。


package.json

{

"name": "sample",
"version": "0.0.0",
"description": ""
}

適当に削った時に、よく最後のカンマを消し忘れるので、注意ですw


npm install --save-dev


command

$ npm install --save-dev grunt


--save-devはinstallしたlibraryの情報を自動でpackage.jsonに書いてくれるoptionです。

command実行後にnode_modules/gruntが増えていることが分かると思います。

-gオプションを付けずに実行した場合は、node_modulesにインストールされます。

projectごとに作られるわけですね。

gruntについては次のTopicで利用しようと思っているpackageですので、今の段階ではそういうpackageがインストールされたのだなとだけ思っていてください。

また、package.jsonにも変更が入っています。


package.json

{

"name": "sample",
"version": "0.0.0",
"description": "",
"devDependencies": {
"grunt": "~0.4.1"
}
}

devDependenciesが増えています。

devDependenciesというのは開発時のみ利用するlibraryのversionを管理します。

libraryとして公開するようなprojectだと、--saveになります。

今回追加したのはgruntですので、gruntが書かれています。


npm install


command

$ npm install


オプション無しで、npm installを実行すると、package.jsonの内容に従って、packageをインストールします。

試しに、node_modulesディレクトリを削除して、実行してみてください。

node_modulesが再度作成されて、gruntがインストールされるはずです。


おまけ

node_modulesはnpm installで自動生成されるディレクトリですので、VCSで管理する必要はありません。

gitを利用している場合は、.gitignoreに追加しておきます。


.gitignore

# for client side development

node_modules/