javascript - De ce trebuie să adaug extensia .js când import fișiere în typescript dar nu în importurile Angular?

În proiectul meu TypeScript trebuie să adaug extensia *.js la importuri, altfel proiectul va compila, dar va eșua la rulare în browser pentru că nu poate găsi fișierul.

Așa arată importurile mele din TypeScript:

import {MainApp} from './MainApp.js';

window.onload = () => {
  var app = new MainApp(5);
  app.doSomething();

};

Din ceea ce am citit (Adăugarea extensiei .js la instrucțiunile de import relative în timpul compilării TypeScript (module ES6), de exemplu) se pare că este ceva normal pentru TypeScript să nu pot face asta: import {MainApp} din './MainApp.js';

Dar chestia este că în Angular folosind TypeScript pot să fac asta:

import {MainApp} from './MainApp';

Deci, cum face Angular asta? Există o modalitate prin care pot replica acel comportament în proiectul meu non-Angular, pur TypeScript?

Răspuns #1

Pentru că Angular CLI compilează mai întâi toate fișierele tale sursă în mai puține fișiere pentru browser. Tot codul tău din mai multe fișiere ajunge într-un singur fișier .js. La momentul compilării, compilatorul găsește fișierul legat de MainApp și îl pune în fișierul de ieșire.

În timp ce compilatorul TypeScript, în cea mai mare parte, doar elimină părțile TS și păstrează părțile JS. În rest, nu modifică fișierele. Browserul apoi, la rulare, solicită toate fișierele sursă .js.

Dacă nu vrei să te ocupi de extensiile fișierelor la import, vei avea nevoie de un bundler. Există multe diferite, precum webpack, rollup, parcel și multe altele.