npm コマンドを使ってパッケージをインストールする( node-sass をインストール)

メモ:  Category:front-end

CSS を作成するときに CSS を作成するための言語(メタ言語)として SASS というプログラムチックな書き方ができる

SASS をコンパイルして CSS を生成する node-sass パッケージをインストールしながら package.json の中も見ていきたいと思います。

node-sass のインストール

パッケージのインストールには、グローバルインストールとローカルインストールの2種類の方法があります。例えば、業務で使用する場合、利用するパッケージのバージョンが指定されるかもしれません。そんな要望に対応するにはローカルインストールを実施します。

プロジェクト個別にパッケージを管理したいため、プロジェクトのフォルダーがカレントとなるよう移動します。(プロジェクトフォルダーを c:\Projects\blueleaf としています。)

次に npm install コマンドの後に使いたいパッケージ名を指定します。( –save-dev オプションは別途説明)

c:\Users\bnote> cd c:\Projects\blueleaf
c:\Projects\blueleaf> npm install --save-dev node-sass

インストールを実行すると プロジェクトの配下に node_modules フォルダーが作成され、このフォルダーにパッケージがインストールされます。

同時に package.json にインストールしたパッケージの情報が追記されます。今回の例では 「devDependencies」 という項目が追加されその中にインストールしたパッケージの名前とバージョンが追加されています。

  "devDependencies": {
    "node-sass": "^4.12.0"
  }

また、依存するパッケージを定義する項目として 「Dependencies」 というものもあります。「devDependencies」 は、インストール時のオプションとして 「–save-dev」 を追加したため開発に必要なパッケージとして関連付けられました。「–save-dev」 オプションを省略したり、「–save」 とオプションをつけると 「Dependencies」 項目に依存関係が設定されます。

  • Dependencies:実行に必要なパッケージの定義
  • devDependencies:パッケージの開発に必要なパッケージの定義

以上でインストールは完了です。

npm の便利なところ

npm の何が便利かという部分を見ていきたいと思います。上記例でプロジェクトフォルダーには、「 node_modules 」フォルダーが作成され node-sass パッケージ関係が配置されていると思います。便利さを確認するため「 node_modules 」フォルダーを削除します。すると、プロジェクトフォルダーには2つのファイルが残ると思います。

blueleaf
    |- package.json
    |- package-lock.json

package.json の中には「 devDependencies 」が定義されており node-sass に依存していることになっていると思います。

この状態で次のコマンドを実行するとインストールするパッケージを指定していないのですが、「 node_modules 」フォルダーが作成され node-sass パッケージがインストールされます。

c:\Projects\blueleaf> npm install

このことから package.json に必要な情報が定義されていることにより、 package.json があれば別の環境でも同じ開発環境を再現することが可能となります。

bluenote by BBB