9
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

[npm]依存関係の解決に必要だった前提知識たち

Last updated at Posted at 2020-07-23

目的

  • 環境構築で依存関係のエラーが頻発した私が、そもそも論に立ち戻って、依存関係ってなに?を解決する。

今日やること

  • npmの役割、依存関係とは何か、そもそもなぜそれらが必要か、処理の意味をまとめる。

記事作成、自環境での作業は、特にこちらの記事こちらの記事を参考にさせていただきました。

npmとは?

パッケージを操作するための CLI(コマンドラインインターフェイス; コマンドラインから実行できるプログラム)

npm (node package manager) はその名の通り Node.js のパッケージを管理するための CLI であり、パッケージを作成したり、NPM 上のパッケージをローカルにインストールしたり、自分のパッケージを NPM に公開したりと、Node.js の開発に欠かせないツールである。Node.js をインストールすると自動的に npm もインストールされる。

依存関係とは?

私自身が理解しておきたかった点ですが、そもそもの大前提として、フレームワークなどを使うにはパッケージが必要です。そしてその必要なパッケージ郡をまとめたものがpackage.jsonに入っています。
(あれ?最初からpackage.jsonが用意されている状況下では、initしたらinstallせずともされるのかな?)

package.jsonを作る

1からプロジェクトを作る場合は、初期化をすることでpackage.jsonを作成できます。

npm init

対話形式で質問がでてくるが、全てEnterでよい。質問をスキップする場合は-yオプションをつけておく。

依存関係のあるパッケージを追加する(フレームワークなどに必要なパッケージをいれる)

2つの方法があります。

先輩の環境をコピーする OR 自分でpackage.json書いたのでパッケージを追加したい。

npm install

使用シーンはこのような場合のようです。

  • GitHub 上のパッケージを開発/実行したいので、新しいマシン上に clone してきた
  • create-react-app などの、新しくプロジェクトを生成するツールを使ってパッケージを作成した そのツールが自動で npm install まで実行してくれることもある
  • node_modules 内のファイルを誤っていじってしまい、一旦 node_modules ごと削除した

一つずつインストールする

npm install [パッケージ名]

どちらでinstallした場合も、package-lock.jsonに追加されます。

package.jsonとpackage-lock.jsonって何がちがうの?

こちらの記事でとてもシンプルに説明してくださっています。

package.json
買い物リスト
package-lock.json
買ったものリスト

インストールが終わったものは、package-lock.jsonに記述されます。

Git管理は必要?

ローカルと全く同じものをGitにあげるのは、意味がないし、なんならローカルとGITとでverが同じなのかという懸念も生じる。そのため、node-modulesはgitignoreファイルにいれておくとよい。

(node-modules自体が何をしているのか公式をみても理解できなかったので追って学ぶ。)

@righteousさま にnode-moduleが何か?おしえていただきました。ありがとうございます。

基本的には単にインストールしたパッケージが node_modules ディレクトリの中に置かれるというだけです。ただし、そこにあるパッケージがexportしているもの(正確には、そのパッケージの package.json にかかれている main の JS が export しているもの)は、自分のコードから require("パッケージ名") で import できるという、特別ルールがあります。

node-moduleは、パッケージが入っている箱で、
packege.jsonは、インストールしたいパッケージリストで、特別な使い方があると理解しました!

npmとyarnの違いは?

2019年ごろからFacebook社により開発されたyarnも使われはじめ、npm欠点を補っており人気。
両者の違いは、世界最大規模なので対応の多さのnpm、速さとセキュリティーのyarnと理解した。
両者の学習コストは高くない模様

9
8
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?