为什么在 typescript 中导入文件时需要添加 .js 扩展名，而不是在 Angular 导入中？答案

【问题标题】：Why do I need to add the .js extension when importing files in typescript but not in Angular imports?为什么在 typescript 中导入文件时需要添加 .js 扩展名，而不是在 Angular 导入中？
【发布时间】：2022-01-24 09:54:03
【问题描述】：

在我的 typescript 项目中，我需要在导入时添加 *.js 扩展名，否则项目将构建，但它会在浏览器中运行时失败，因为它找不到文件。

这是我的打字稿导入的样子：

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

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

};

根据我的阅读（例如Appending .js extension on relative import statements during Typescript compilation (ES6 modules)），对于打字稿来说，我不能这样做似乎很正常：从'./MainApp.js'导入{MainApp}；

但问题是在 Angular 中使用 typescript 我可以做到这一点：

import {MainApp} from './MainApp';

那么，Angular 是如何做到的呢？有一种方法可以在我的非 Angular 纯打字稿项目中复制这种行为？

【问题讨论】：

标签： javascript angular typescript

【解决方案1】：

因为 Angular cli 首先将所有源文件编译成更少的文件供浏览器使用。来自多个文件的所有代码都放在一个 .js 文件中。在编译时，编译器会找到 MainApp 相关文件并将其放入输出文件中。

而打字稿编译器大部分只是删除 TS 部分并保留 TS 部分。否则它不会触及文件。然后浏览器在运行时请求所有源 .js 文件。

如果您不想在导入时关心文件结尾，则需要一个捆绑程序。有许多不同的，例如 webpack、rollup、parcel 等等。

【讨论】：