javascript - Hvorfor skal jeg tilføje .js-udvidelsen, når jeg importerer filer i typescript, men ikke i Angular-imports?

I mit TypeScript-projekt skal jeg tilføje *.js-udvidelsen, når jeg laver imports, ellers vil projektet bygge, men det vil fejle ved kørsel i browseren, fordi filen ikke kan findes.

Sådan ser mine TypeScript-importer ud:

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

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

};

Ud fra det, jeg har læst (tilføjelse af .js-udvidelse på relative import-erklæringer under Typescript-kompilering (ES6-moduler) for eksempel), synes det at være en normal ting for Typescript, at jeg ikke kan gøre dette: import {MainApp} fra './MainApp.js';

Men sagen er, at i Angular kan jeg bruge Typescript til at gøre dette:

import {MainApp} from './MainApp';

Så, hvordan gør Angular det? Er der en måde, jeg kan genskabe den adfærd i mit ikke-Angular, rene TypeScript-projekt?

Svar #1

Fordi Angular CLI først kompilerer alle dine kildefiler til færre filer til browseren. Al din kode fra flere filer ender i bare en .js-fil. Ved kompileringstidspunkt finder compileren den MainApp-relaterede fil og lægger den i output-filen.

Mens TypeScript-kompilatoren for det meste bare fjerner TS-delene og beholder JS-delene. Ellers rører den ikke filerne. Browseren anmoder så ved kørselstid om alle kilde .js-filerne.

Hvis du ikke ønsker at tænke på filendelser ved import, vil du have brug for en bundler. Der findes mange forskellige som webpack, rollup, parcel og mange flere.

Relaterede artikler