このTopicはWeb ApplicationのfrontendのProjectを管理するTopicの2つ目です。
前提条件として、僕の環境は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
$ npm install -g grunt-cli
-g オプションは指定されたpackageをグローバルな領域にインストールするcommandです。
version関係なく、どのprojectでも利用するようなpackgeをインストールする時に利用します。
上の例だと、grunt-cliをインストールしています。
grunt-cliについては次のTopicで利用しようと思っているpackageですので、今の段階ではそういうpackageをグローバルな領域にインストールされたのだなとだけ思っていてください。
###npm init
$ 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です。
{
"name": "sample",
"version": "0.0.0",
"description": ""
}
適当に削った時に、よく最後のカンマを消し忘れるので、注意ですw
###npm install --save-dev
$ 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にも変更が入っています。
{
"name": "sample",
"version": "0.0.0",
"description": "",
"devDependencies": {
"grunt": "~0.4.1"
}
}
devDependenciesが増えています。
devDependenciesというのは開発時のみ利用するlibraryのversionを管理します。
libraryとして公開するようなprojectだと、--saveになります。
今回追加したのはgruntですので、gruntが書かれています。
###npm install
$ npm install
オプション無しで、npm installを実行すると、package.jsonの内容に従って、packageをインストールします。
試しに、node_modulesディレクトリを削除して、実行してみてください。
node_modulesが再度作成されて、gruntがインストールされるはずです。
##おまけ
node_modulesはnpm installで自動生成されるディレクトリですので、VCSで管理する必要はありません。
gitを利用している場合は、.gitignoreに追加しておきます。
# for client side development
node_modules/