作業中に、使用しているパッケージのバージョンを更新したところ以下のようなエラーに遭遇しました。
ERROR ...
Module build failed (from ./node_modules/.../index.js):
Error: ENOENT: no such file or directory, open '...'
解決策を調べていたところ、node_modulesを削除してインストールし直したら直るということだったのですが、「そもそもnode_modules何なんだっけ」とか「ビルドって何なんだっけ」っていう風に思ったのでまとめます。
用語一覧
- コンパイル
- ビルド
- デバッグ
- 具体的なビルド処理とその目的
- ビルドするためのツール（webpack,babel）
- node_moduleとは
コンパイル
「ソースコード」を「オブジェクトコード」（またはバイナリコード）に変換する作業のこと
ソースコードとは、開発者である人間の言葉で書かれたコードのこと
ソースコードのままではコンピュータは理解できないため、コンピュータが理解できる形に変換してあげる必要がある。
コンピュータが理解できるようにしてあげたコードのことをオブジェクトコード（またはバイナリコード）という。
また、コンパイルを行うソフトウェアのことを「コンパイラ」とよび、各プログラミング言語によって対応しているコンパイラがある。
ビルド
ソースコード上に問題がないかどうかを解析を行った上で、問題がなければオブジェクトコードに変換し、複数のオブジェクトファイルを1つにまとめて実行可能なファイルを作成する作業のこと
複数のファイルから構成されているプログラムの場合でも、最終的には一つのファイルに集約され実行される。
「リンク」と呼ばれるオブジェクトコードに変換されたバラバラなファイルを一つの実行ファイルとしてまとめる作業
そのほかに参照される外部ファイルがある場合は、そのファイルをコピーしてまとめる作業
などなど、これら一連の作業をいう。
つまり、コンパイルもビルドの作業の一環ということになる。
デブロイ
ビルドされた実行ファイルを実行可能な環境に配置し、実行できるようにする作業のこと
もう少しわかりやすくいうと、ビルドされたプログラムをサーバーに置いた上で、起動してアプリケーションを稼働させること
具体的なビルド処理とその目的
bundle - 複数ファイルのソースを1ファイルにまとめる
開発時には機能ごとなどでファイルを分けて開発する方が開発しやすかったり、保守性の面で良いですが、ユーザが実行する時にはたくさんのjsファイルがあるとダウンロードに時間がかかりパフォーマンスが落ちてしまうので、できるだけjsファイルは一つにまとまっていた方がいい。
そこで出番なのがbundle処理
transpile - 新しい規格を古い規格に変換
Javascriptは、より効率的に開発ができるように日々新しい規格（ES5、ES6、など）が生まれ、新しい文法が追加されているが、古いブラウザは新しい規格に対応していないため、新しい文法を使うと対応ブラウザが限られてしまう。
そこで出番なのがtranspile処理
例えば、const/letを全てvarに置き換えるなど。
→じゃあ使い分ける意味は？
linter（文法チェッカー）を使えば、transpileするより前に最新の規格に沿ってチェックを行える！
その他にも、アロー関数、class構文、async/awaitなど
minify - インデントやコメントなどを取り除く
開発する上で、適切なインデントやコメント、わかりやすい命名規則などは必須だが、プログラムの動作とは無関係。
そのため、ソースコードから実行上意味のないスペースや改行を取り払うことで、ファイルサイズを小さくしてパフォーマンスをあげることや悪意のある攻撃者がソースコードを読んでアプリケーションの脆弱性を見つけることを難しくしたり、知的財産であるソースコードの盗用を防ぐ。
そこで出番なのがminify処理
ビルドするためのツール（webpack,babel）
以上のような処理を行うためにはwebpack,bableというツールを主に使います。
*webpack：bundleおよびminify処理をしてくれる
*babel：transpile処理をしてくれる
→これらのツールはNode.jsのパッケージとして提供されているため、フロントエンドの開発環境をNode.jsで構築することが多い！（なるほど！）
これらのパッケージをインストールして、設定ファイルに必要事項を記載しておくことで、コマンド一つで一連のビルド処理を行なってくれる。
node_modulesとは
package.json を元にしてインストールされる各種パッケージがインストールされるディレクトリ先のこと
package.jsonがあればyarn installのコマンド実行でnode_modulesが生成される。
※package.jsonとは
Node.js ベースの JavaScript アプリ開発において、自身のパッケージ（= プロジェクトそのもの）を管理するために使われるファイル
yarn init とコマンド実行すると package.json が作成されます。
おまけ
パッケージ、モジュール、ライブラリの違いがよくわからん
参考