簡単まとめ npmでパッケージをローカルインストールして利用する方法

Featured image

こんにちは。

JavaScript で開発する時、ライブラリをインストールして取り込んだ上で開発することがあります。

Node.js で開発している場合は、npm でパッケージをインストールしてライブラリを使用します。

npm でのインストールは、「ローカル」と「グローバル」のインストールがあります。
グローバルでインストールすれば、どのパスでもインストールしたパッケージを利用することができます。
ローカルでインストールすれば、インストールしたディレクトリ配下でパッケージを利用することができます。

ただ別プロジェクトに参画した時に、別バージョンのパッケージが必要だったり、不要ライブラリがインストールされた状態になってしまうので、基本的にはローカルにパッケージをインストールした方がいいです。

今回は知識の整理の為に、npm パッケージインストール辺りを書いていきます。

まず Node.js npm とは

まず JavaScript/Node.js での開発環境を前提としていますが、Node.js とは何でしょうか。

Node.js

サーバーサイドで JavaScript を動かすことができるプラットフォームです。 過去 JavaScript はブラウザ上のページに動きをつけることがメインでしたが、そのクライアントサイドエンジニアでも Node.js があることでサーバーサイドの開発をすることができます。

npm (node package manager)

パッケージマネージャーのことです。 Node.js のパッケージを管理するツールのことです。 あらかじめ Node.js で用意してある便利なツールを、npm でインストールして使用することができます。Node.js をインストールしたら npm を使えます。

npm コマンド

インストール済パッケージの確認:local

npm list --depth 0

インストール済パッケージの確認:global

npm list --depth 0 -g

パッケージをインストール:local

開発時のみ利用するパッケージの場合、package.json の devDependencies に追記する必要ありなので、以下コマンドをたたいてローカルにインストールさせる。

npm install パッケージ名 --save-dev

ローカルで npm パッケージインストールして利用する方法

以下手順を記します。

  1. 開発するフォルダを作成する mkdir dev

  2. npm init で初期化をする 初期化した上で package.json ファイルを作成する

  3. インタラクティブ形式で各パラメータを設定する。 私はサンプルアプリなら以下パターンでよく登録する。

package name: (a) sample-apps
version: (1.0.0) 1.0.0
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
  1. dev ディレクトリ配下に package.json ファイルが作成されていることを確認する
  2. ローカル環境にパッケージをインストールする
npm install --save-dev
  1. パッケージがインストールされたか確認する
npm list --depth 0

インストールするだけなら以上までが手順です。

インストールしたパッケージ自身を実行する場合は以下コマンドをたたきます。

npm start

その場合 package.json を修正することを忘れずに。

※以下は browser-sync パッケージを利用する場合

"start": "browser-sync start --server --files='**/*'"

以上

comments powered by Disqus