LoginSignup
622
586

More than 5 years have passed since last update.

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

Last updated at Posted at 2013-06-29

この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/
622
586
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
622
586