javascript - 為什麼在 TypeScript 中導入文件時需要添加 .js 擴展名，但在 Angular 導入中不需要？

在我的 TypeScript 專案中，當進行匯入時，我需要加上 *.js 副檔名，否則專案可以編譯，但在瀏覽器執行時會失敗，因為無法找到該檔案。

這就是我的 TypeScript 匯入的樣子：

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

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

};

根據我所閱讀的資料（例如，在 Typescript 編譯期間，對相對匯入語句附加 .js 擴展名（ES6 模組）），似乎對於 Typescript 來說很正常，我不能這樣做：import {MainApp} from './MainApp.js';

但是問題是，在 Angular 中使用 TypeScript，我可以這樣做：

import {MainApp} from './MainApp';

那麼，Angular 是怎麼做到的呢？有沒有辦法我能在我的非 Angular、純 TypeScript 專案中複製那個行為？

答案＃1

因為 Angular CLI 會先將所有源文件編譯成較少的文件以供瀏覽器使用。你多個文件中的所有代碼最終都會集中到一個 .js 文件中。在編譯時，編譯器會找到與 MainApp 相關的文件並將其放入輸出文件中。

然而，TypeScript 編譯器大部分情況下只是移除 TS 部分並保留 JS 部分。否則它不會碰文件。瀏覽器在運行時會請求所有的源 .js 文件。

如果你不想在導入時關心檔案結尾，你將需要一個打包工具。有很多不同的選擇，例如 webpack、rollup、parcel，還有更多。