npmによるパッケージ管理 - Node.jsの学習3

Node.js

npm(Node Package Manager)とは

Node.js上で使用するパッケージを管理するツール
コマンド一つでパッケージのインストール、削除、更新が可能

なぜnpmが必要なのか

それぞれのライブラリをダウンロードしていたら、管理に手間が掛かるため

npm install lodash

import _ from "lodash"

const original = { prop: { nested: "value" } }

// オブジェクトの複製
const cloned = _.cloneDeep(original)
// 複製なので値を書き換えても元の値には影響しない
cloned.prop.nested = "new value"

console.log(original, cloned)
// { prop: { nested: 'value' } }
// { prop: { nested: 'new value' } }

パッケージが読み込まれる流れ

importにパスの指定がない場合、パッケージとして取り扱われる（Node.jsの仕様）
node_modulesディレクトリから探す

// パッケージの中から読み込むこともできる
import cloneDeep from "lodash/cloneDeep.js"
// or
// requireで読み込むと、".js"を省略できる
const cloneDeep = require("lodash/cloneDeep")

const original = { prop: { nested: "value" } }

// オブジェクトの複製
const cloned = cloneDeep(original)

cloned.prop.nested = "new value"
console.log(original, cloned)

package.jsonの中身

{
  "name": "lodash",
  "version": "4.17.21",
  // ↓ パッケージを公開しない限り必要ない
  // description, keywords, homepage, repository
  "description": "Lodash modular utilities.",
  // npm searchコマンドで検索する時に使うキーワード、配列で指定する。
  "keywords": ["modules", "stdlib", "util"],
  "homepage": "https://lodash.com/",
  "repository": "lodash/lodash",
}

# パッケージのホームページを開く
npm docs [package]
# or
npm home [package]

# ヘルプ
npm -h

dependeciesとdevDependenciesの違い

  • dependecies
    依存しているパッケージのリスト
  • devDependencies
    開発環境で依存しているパッケージのリスト

devDependenciesに追加するパッケージはビルドやテストを行うためのものなど。
ソースコードで使用しないパッケージは、devDependeciesに追加する。

# dependeciesに追加される
npm install [package]
# or
npm i [package]

# devDependenciesに追加される
npm i [package] --save-dev
# or
npm i [package] -D

# リポジトリのページを開く
npm repo .

# バグの一覧ページを開く
npm bugs [package]

{
  // npmとして公開したい時に含めたいファイルやフォルダを記述する
  "files": [
    "index.js"
  ],
    "engines": {
    // nodeのバージョンを指定
    "node": ">=4"
  },
  // 本番・開発環境で依存しているパッケージ
  "dependencies": {
    "is-number": "^6.0.0"
  },
  // 開発環境で依存しているパッケージ
  "devDependencies": {
    "gulp-format-md": "^1.0.0",
    "mocha": "^3.5.3"
  }
}

npm installとバージョン

  • プロジェクトを共有したいとき
    package.jsonだけ共有すれば、必要な依存関係のパッケージは、インストールできる。
{
  "dependencies": {
    "is-odd": "^3.0.1",
    "jquery": "2.1"
  },
  "devDependencies": {
    # ^(キャレット)を使うとメジャーバージョンを保持した
    # 最新のマイナーバージョンがインストールされる
    "webpack": "^5.00.0"
  }
}

# パッケージが提供しているバージョンの確認
npm view [package] versions

# パッケージの削除
npm rm [package]

# package.jsonを元にインストール
npm i

# バージョンを指定したインストール
npm i jquery@2.1

# インストールされているパッケージの確認
npm ls

npm scriptの基礎

# npm scriptのtestを実行
npm run test

# 初期化
npm init

# 初期化（デフォルト値）
npm init -y

{
  "scripts": {
    "dev": "node main.js",
    "test": "node main.js",
    "start": "node main.js",
    "stop": "node main.js",
    "restart": "node main.js"
  }
}

npm run [ test | start | stop | restart ]は、runを省略しても実行できる

パッケージをscriptsに登録する

npmでインストールしたコマンド自体も実行できる

{
  "scripts": {
        "start": "live-server index.html --port=3000"
  },
  "devDependencies": {
    "live-server": "^1.2.2"
  }
}


npm start — —port=3000

引数を渡すことも出来る

{
  "scripts": {
    "start": "live-server index.html"
  },
  "devDependencies": {
    "live-server": "^1.2.2"
  }
}

npm start -- —port=3000

--(2つのハイフン)は、npmのオプションの終了を示す記述

live-server index.html --port=3000

上記コマンドが実行される。

ローカルパッケージとグローバルパッケージの違い

ローカルの場合npxで./node_modules/.binの中のコマンドを実行できる。

npx live-server

グローバルの場合、npxなしで実行できる。

# グローバルにパッケージをインストール
npm i -g live-server

live-server

グローバルパッケージの保存場所を確認する。

npm root -g
# -> /home/user/.nvm/versions/node/v20.9.0/lib/node_modules

グローバル環境からパッケージを削除する

npm rm -g live-server

パッケージを跨いだ開発方法

パッケージを分けて開発することは稀だが、一部共通処理を開発する時にパッケージに分ける事がある。

  1. lib-prj で npm link を実行 -> リンクの作成
  2. main-prj で npm link lib-prj を実行 -> lib-prj を使用することが出来る

注） npm install で他のパッケージをインストールすると npm link が切れる場合がある

dependencies に直接追記する

  "dependencies": {
    "lib-prj": "file:../lib-prj"
  }