JavaScript Imports Under the Hood (2023)
a year ago
- #JavaScript
- #Web Development
- #Module Imports
- JavaScript and TypeScript require understanding sophisticated transformations between written code and browser-executed code.
- Imports like SVG, JSON, CSS, and module identifiers often undergo non-standard transformations and require specific tooling.
- SVG imports can result in raw SVG content or a path reference, depending on the build tool.
- JSON imports transform JSON files into JS objects, but this is not natively supported by browsers.
- CSS imports might inject styles into the DOM or provide class names, varying by framework or bundler.
- Module identifiers (e.g., '~/foo.js' or 'bar:foo') are non-standard and their behavior depends on the tooling.
- Deno's approach to module loading aligns with browser semantics, reducing complexity and magic.
- The gap between authored code and browser-executed code is widening, increasing the need for understanding underlying transformations.