TypeScriptとNode.jsとwebpackの関係

Question

分からないこと

題名の通り、typescriptとnode.js、webpackの関係性についてイマイチパッとしません。

自分なりに考えて以下のイラストを作ってみたのですが、図と以下の認識は間違っているでしょうか。

• typescriptで記述されたものがトランスパイルされてjsファイルになる
• jsファイルになることで、ブラウザがファイルを認識できるようになる
• 「サーバーとのやり取りをしない」ならば、node.jsを使用する必要はない
• node.jsを使用すると、フロントエンドとサーバー側のやり取りができるようになる（ユーザーからデータを受け取ってデータベースに保存するなど）
• 「ファイル同士の依存関係を自分たちで何とか解決できる」ならば、webpackを使用する必要はない
• webpackを使用すると、複数のjsファイルが依存関係を解決しつつ一つにまとめられる
• 「サーバーとのやり取りをしない」、「ファイル同士の依存関係を自分たちで何とか解決できる」ならば、node.jsもwebpackも使用する必要はない

ここは違う、こう理解した方が良い、付け加えると...等ありましたら、教えていただけると幸いです。

よろしくお願いいたします。

Comments

[hoshi-takanori]

node.js はブラウザから独立した汎用の JavaScript 処理系に過ぎず、
1. Web とはなんの関係もないプログラムを動かすことも、
2. Web サーバーを動かすことも、
3. TypeScript コンパイラや webpack などを動かすこともできます。

特に 2 と 3 で混乱しているように見えます。

Answer 1

この場合、Node.jsはコンパイラやWebpackを動かすために前提のプログラムとして必要となります。

WebPackはTypeScriptを読み込み、（ローダーといいます）
依存関係を解消してJSファイルにコンパイルすることもできます。
⇒ 別途コンパイラが必要ない

また、TSCなどのコンパイラをつかって、
依存関係を自力でなんとかする場合はWebPackは必要ありません。