JavaScript、TypeScriptのモジュール分割について整理してみた

ARANK

JavaScriptなのかTypeScriptなのか、またはモジュールバンドラー(webpackなど)の機能が使われているのかをちゃんと理解していなかったので整理 JavaScript importを使わないファイルの依存関係、読み込み順序を開発者が管理する必要があるhtml<script src="./bar.js" defer></script> <script src="./foo.js" defer></script> <script src="./index.js" defer></script> javascript// index.js console.log(foo); // foo.js const foo = bar; // bar.js const bar = "bar"; importを使うファイルの依存関係、読み込み順序を開発者が管理する必要がない。ただし、importごとにhttpリクエストが発生するので遅延が発生するjavascript// index.js import { foo } from "./foo.js"; console.log(foo); // foo.js import { bar } from "./bar.js"; export const foo = bar; // bar.js export const bar = "foo"; html<script src="./index.js" type="module"></script> モジュールバンドラーを使ったimportファイルの依存関係、読み込み順序を開発者が管理する必要がない。また、htmlが読み込むファイルはモジュールバンドラー(webpackなど)によってバンドル(1ファイルにまとめ…