Skip to main content
  1. Posts/

npmとはなにかざっくり理解する〜pug・sass・TypeScript・gulpでハイカラなフロントエンド開発〜

·76 words·1 min
Table of Contents

前回に引き続きざっくり理解するシリーズ。

今回はnpm。Node.jsが関係しているのでNode.jsを知らない人は前回の記事も合わせてどうぞ。

例によって事実の様に語りますよ。気をつけてくださいね。

目次

npmとは
#

npmとはNode.jsのパッケージ管理ツールです。パッケージマネージャとも言います。

パッケージっていうのは「動作に必要なプログラムやファイルを集めたもの」のことです。

つまりnpmは、Node.jsのパッケージ類をインストールしたりアンインストールしたり、何をインストールするべきかを管理してくれるツールです。

例えばnpm install pugというコマンドならpugを使うためのプログラムやファイルをまとめてインストールしてくれます。便利ですね。

npmの使いかた
#

まずはインストール。

と入ったもののnpmはNode.jsをインストールするとついてきますのでnode.jsをインストール=npmのインストールです。

例によってhomebrewを使っています。因みにhomebrewもパッケージ管理ツールです。こっちはNode.jsとかではなくMac OS X全般のパッケージを管理します。

それはさておきコマンドは以下です。

brew install node

これでインストールできました。

pugの場合で使い方を確認。

//1.pugを初めて使う場合はpugコマンドをどこでも使える様に-g(グローバル)をつけてインストール(一回だけでいいはず)
npm install pug-cli -g

//2.自分のプロジェクトに移動
cd yourProject

//3.npmでパッケージ管理を始めるよっていうコマンド(パッケージ管理用のファイルpackage.jsonを作成)
npm init

//4.gulpでpugを使う様にgulp-pugをインストール
npm install gulp-pug -D//npm i gulp-pug --save-devでも同じ意味

1.でpug-cliをインストールします。

-gのオプションをつけることにより、一度インストールすればプロジェクトをまたいでもどこでも使えるようにしてます。pugの公式がそうしろって言ってるのでそうします。

2.で自分のプロジェクトに移動。

3.でそのプロジェクトをnpmで管理するために必要なファイルpackage.jsonが作られます。

めっちゃいろいろ聞かれますが全部yでいいです。めんどくさい場合は-yオプションをつけるとやってくれます。

4.でgulp-pugをインストールしています。node_moduleというフォルダにインストールされます。

で、大事なのが-D(–save-dev)オプションです。これをつけることにより、インストールしたパッケージ名とそのバージョンが先ほど作ったpackage.jsonに開発の時に使うパッケージとして記入されます。

それの何が嬉しいかというと、例えばyourProjectでnpm initした後、npmを使って-Dオプションをつけてたくさんのパッケージを入れたとします。100個。

で、次のnewProjectでも同じパッケージを使いたいなあと思った時に、100個を手動で入れなおすのはとても大変だし嫌ですよね。

そこで、yourProjectのpackage.jsonをnewProjectにコピーしてcd newProjectからのnpm installを実行します。

すると、package.jsonに-Dコマンドで自動記入された情報をもとに100個全てをまとめてインストールしてくれるわけです。

楽ですね。

あとはパッケージ全てをgitなどで管理するとでかいのでpackage.jsonだけを管理してインストールは各々でやるっていうこともやります。

因みに開発時ではなく動作に必要なパッケージの場合は-S(–save)のオプションをつけます。基本的にそんなに使わないと思うので頭の端に置いておけばいいと思います。

まとめ
#

  • npmはNode.jsのパッケージ管理ツール。
  • -Dオプションをつけてインストールするとpackage.jsonに記入される。
  • npm installコマンドでpakage.jsonに書いてるパッケージをインストールしてくれる。

そんな感じです。終わり。

次はSassですかね。

ではまた。

Related

Node.jsとはなにかざっくり理解する〜pug・sass・TypeScript・gulpでハイカラなフロントエンド開発〜
·65 words·1 min
pug(jade)の使い方〜pug・sass・TypeScript・gulpでハイカラなフロントエンド開発〜
·112 words·1 min
gulpでpugをコンパイル〜pug・sass・TypeScript・gulpでハイカラなフロントエンド開発〜
·203 words·1 min