Help us understand the problem. What is going on with this article?

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/
sinmetal
GCPUG Admin https://gcpug.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした