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

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

今回は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全般のパッケージを管理します。

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

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

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

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ですかね。

ではまた。

にほんブログ村 IT技術ブログへ
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です