パッケージマネージャー
・ファイル同士の依存関係を自動的に解決してくれる。
・import先が明示的にわかる
import { hoge } from './fuga'
・世界中で公開されているパッケージをコマンド一つで利用可能にする。
代表的なものとしてnpm,yarnなどがある。
それまで単一のファイルに処理が書かれていたjavascriptが「これ複数のファイルに分けた方が見やすくていいよね」みたいな考え方から、ファイルを分割して、それを<script>タグで読み込むみたいな形がとられていた。
でもこれだと、どのファイルからどんなものが読み込まれているのかが視覚的にわかりにくかった。
そこで生まれたのがパッケージマネージャー。
どのファイルから何を読み込んでいるのかが明示的にわかるようになったり、世界中の開発者が公開している便利なパッケージをコマンド一つでインストールできるようにしたりした。
npmのレジストリからパッケージをインストールして、その実態はnode_modulesというファイルに格納されている。
どのようなパッケージをどのようにインストールしたのかはpackage.jsonやpackage.lock.jsonファイルに記述されている。
モジュールバンドラー
複数のjavascriptファイルを一つにまとめるためのもの。
代表的なものとしてwebpackがある。
パッケージマネージャーによって分割されたモジュールやパッケージは本番環境で実行する際、一つにまとまっていた方がパフォーマンスが良さそうだよねという考えから、本番用にビルドする際はそれらを一つにまとめるようにした。
その際に使用するのがモジュールバンドラー。ファイル同士の依存関係等も考慮した上でファイルをバンドルしてくれる。
トランスパイラ
新しいjavascriptの記法を古い記法に変換してくれるもの。
代表的なものとしてbabelがある。
javascriptのバージョンES６で、さまざまな便利な記法が追加されたが、その記法に対応していないブラウザがいくつかあった。でもそのためにES6で書くのを諦めてES2015などで記述するのはあまり効率が良くないと考えられたため、ファイルを実行するときに新しい記法を古い記法に変換してくれるツールが開発された。
それがトランスパイラ。