Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
593
Help us understand the problem. What is going on with this article?
@sinmetal

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/
593
Help us understand the problem. What is going on with this article?
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
sinmetal
GCPUG Admin https://gcpug.jp

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
593
Help us understand the problem. What is going on with this article?