June 15, 2020

Vueなどのフロントエンド開発でnpmやpackage.jsonを使う理由

coding
一年ほど前に初めて Vue アプリの開発をしたとき、npm って何ぞ?package.json と package-lock.json ってどう違うの?という疑問があったのですが、だいぶわかってきたのでまとめます。

npm とは何か

Node Package Manager という Node.js に含まれるパッケージ管理ツール(Node.js はブラウザでなくサーバーサイドで動く JavaScript)。これによりアプリケーションで使用されているライブラリやプラグインなどを一括管理できる。

Vue CLI を使って Vue 開発をする場合にはデフォルトで使用することになっているため、Node.js(とその中の npm)のインストール必須。

npm を使うメリット

  • アプリケーションに必要なライブラリ等をひとつひとつ手動でダウンロード・アップデート等すると膨大な手間と時間が掛かるが、npm ならターミナルでコマンドを叩けばそれで完了する。
  • アプリ固有の部分とライブラリの部分を分けることができる。
    npm を使ってアプリに導入されたライブラリは node module としてアプリ内の node_modules フォルダに格納される。この中のファイルは git ignore の対象であり(変更しても git が追跡しない)、リモートリポジトリにプッシュする必要がない。つまりアプリ独自のコードだけをプッシュするため、リポジトリの肥大化を防ぐことができる。

リポジトリをクローンしたら npm install しよう

超初歩的なことですが当時の私は知らなかったのでメモ。

既存プロジェクトの開発を始めるとき、リモートリポジトリからローカルにプロジェクトをクローンしたら、まずはそのルートディレクトリで npm install コマンドを叩きましょう。そうすると npm さんが package.json を元にそのアプリケーションに必要なライブラリ等を一括インストールしてくれます。

package.json と package-lock.json の違い

例えるなら package.json はそのアプリケーションに必要なライブラリ等のお買い物リストで、package-lock.json はそのリストの商品を実際に買った領収書のようなもの。

package.json には必要なディペンデンシー(ライブラリなどアプリに必要なもの)の一覧とそれぞれのバージョンが記載されており、npm install コマンドを実行するとこれを元にディペンデンシーがインストールされる。 そしてその結果が package-lock.json に記載される。なので基本的には両者の内容は一致するはず。ライブラリを npm update でアップデートした場合は両方のファイルが更新される。

package.json と package-lock.json は変更したら両方ともリモートにコミットする必要がある。

参考

https://www.quora.com/When-and-what-is-NPM-used-for