2021.01.11

Node.js

パッケージのバージョン指定インストールとpackage-lock.json

パッケージインストール時にパッケージ名の後に@を付けると、パッケージのバージョンの指定ができます。以下はjqueryのバージョン3.4.1インストール時の指定です。

npm install jquery@3.4.1

実行が完了するとnode_modulesディレクトリ内にjqueryのバージョン3.4.1がインストールされます。package.json及びpackage-lock.json内のdependenciesフィールドには、インストールしたパッケージとそのバージョンが追加されます。ただし、package.json内のバージョン表記はキャレット(^)から始まるバージョン、package-lock.json内のバージョン表記は固定のバージョンです。キャレット(^)から始まるバージョンは、メジャーバージョンが一致するものの中で最新のバージョンという意味です。

//package.json
{
  "dependencies": {
    "jquery": "^3.4.1" //キャレット(^)から始まるバージョン(3.x.xの最新版)
  }
}
//package-lock.json
{
  "dependencies": {
    "jquery": {
      "version": "3.4.1", //固定のバージョン
      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.4.1.tgz",
      "integrity": "sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw=="
    }
  }
}

プロジェクトを複製し、このpackage.jsonのみを使用してnpm installを実行します。今度はpackage.json内のdependenciesフィールドにインストールするパッケージが記述されているため、npm install実行時にパッケージ名は指定しません。

npm install

package.json内のバージョン表記はキャレット(^)から始まるため、同一のメジャーバージョンの最新のバージョンのパッケージをインストールします。jquery3系の最新バージョンは3.5.1です。そのため、package.json内に記述されているバージョンが3.4.1でも、node_modulesディレクトリ内にインストールされるjqueryのバージョンは3.5.1です。また、追加されたpackage-lock.json内に記述されるバージョンも3.5.1になります。

//package.json
{
  "dependencies": {
    "jquery": "^3.4.1"
  }
}
//package-lock.json
{
  "dependencies": {
    "jquery": {
      "version": "3.5.1",
      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.5.1.tgz",
      "integrity": "sha512-XwIBPqcMn57FxfT+Go5pzySnm4KWkT1Tv7gjrpT1srtf8Weynl6R273VJ5GjkRb51IzMp5nbaPjJXMWeju2MKg=="
    }
  }
}

複製元のプロジェクトと同じパッケージ環境を構築するにはpackage.jsonだけでなくpackage-lock.jsonも一緒に配置してnpm installを実行します。

npm install

package-lock.jsonが存在すると、npmはpackage-lock.jsonを元にパッケージをインストールします。package-lock.json内のバージョン表記は固定のバージョンなので、コピー元のプロジェクトと同じ環境を構築することができます。

//package.json
{
  "dependencies": {
    "jquery": "^3.4.1"
  }
}
//package-lock.json
{
  "dependencies": {
    "jquery": {
      "version": "3.4.1",
      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.4.1.tgz",
      "integrity": "sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw=="
    }
  }
}

なお、例えバージョン表記が3.4.1のpackage.jsonとpackage-lock.jsonを一緒に配置していても、npm installでバージョン名を指定せずにパッケージ名を指定した場合、パッケージの最新バージョンがインストールされます。これはpackage.json及びpackage-lock.json内のdependenciesフィールドを使用せず、直接パッケージをインストールしているためです。インストールが完了すると、package.jsonとpackage-lock.jsonのバージョン表記も3.5.1に書き換わります。

npm install jquery
//package.json
{
  "dependencies": {
    "jquery": "^3.5.1"
  }
}
//package-lock.json
{
  "dependencies": {
    "jquery": {
      "version": "3.5.1",
      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.5.1.tgz",
      "integrity": "sha512-XwIBPqcMn57FxfT+Go5pzySnm4KWkT1Tv7gjrpT1srtf8Weynl6R273VJ5GjkRb51IzMp5nbaPjJXMWeju2MKg=="
    }
  }
}

関連記事

2021.03.16

Node.js

gulp-sass-globでパーシャルファイルを読み込み

sassコンパイル時、コンポーネントごとに細分化されたパーシャルファイルは、読み込み元のscssファイルから@importを利用して読み込みます。以下の例ではl…

2021.03.21

Node.js

gulp-postcssでpostcss-sortingを実行

gulp-postcssはgulp上でPostCSSが実行できます。postcss-sortingはPostCSSのプラグインで、CSSプロパティの記述順を並べ…

2021.01.11

Node.js

npm initによるpackage.jsonの作成とパッケージのインストール

プロジェクトを作成するディレクトリでnpm initを実行してpackage.jsonを作成します。対話形式で作成しますが何も入力せずEnterキーで進めていく…

2021.02.12

Node.js

scss-lint.ymlの設定

Ruby製のscss-lintはscssのコードを検査して設定と異なる場合は警告してくれるツールです。ルールを記述する設定ファイルは拡張子ymlのファイルで作成…

2022.07.10

Node.js

scss-lintのエラー回避方法

scssファイル内でscss-lintのエラーを回避します。以下はgridレイアウトで使用する「fr」が許可されていない単位としてエラーになるのを無効化していま…

上に戻る