我知道我们可以使用import {x} from "./file" 并且变量 x 将从同一目录中的 file.js 导入。如果目录中存在具有不同扩展名的同名文件，如何处理？
例如，如果 file.js 和 file.ts 在同一个目录下，import {x} from "./file" 会如何表现？这取决于javascript的版本吗？
【问题讨论】：
标签： javascript ecmascript-6 es6-modules javascript-import
是否取决于 javascript 的版本？
不，这取决于 JavaScript 运行时的行为，即执行脚本的东西。
在支持 ES 模块 (ESM) 的浏览器中，不会将扩展名添加到您 import 的 URL - 例如，如果您的文件具有 .js 扩展名，则必须编写 import {x} from "./file.js"。浏览器没有有用的方法来查找服务器上可用的具有哪些扩展名的文件。
在不支持 ESM 的浏览器中，您必须将模块转换为可以在浏览器中运行的捆绑格式。在这种情况下，这取决于您选择使用的特定捆绑器的行为（见下文）。
在支持 ESM 的 Node.js 版本中，运行时不会搜索扩展，但会按名称解析来自 node_modules 的模块。例如import 'lodash' 可以解析为./node_modules/lodash/index.mjs，而您无需知道index.mjs 的扩展名。
在 不 支持 ESM 的 Node.js 版本中，您不能使用 import - 您必须先将模块转换为 CommonJS 格式，最终将使用 require。 require 有一个扩展列表，它将在文件系统中搜索。
例如，如果 file.js 和 file.ts 在同一个目录下，
import {x} from "./file"会如何表现？
视情况而定。
当您转译或编译脚本时，识别哪些扩展取决于编译器和您为编译提供的设置。
例如，在 webpack 中，有预定义的支持扩展列表 - '.wasm', '.mjs', '.js', '.json'，但可以通过在 webpack.config.js 文件中使用 resolve.extension 设置来更改它。
如果你使用webpack 和ts-loader 插件，.ts 文件扩展名也会被识别，但加载器会尝试使.ts 文件被编译成.js 文件，并会尝试捆绑时使用已编译的.js 文件。
如果你使用普通的 typescript 编译器来编译你的脚本，编译器会寻找一个带有 '.ts' 扩展名的文件来执行类型检查，但是它会生成一个代码来寻找一个带有 '.js' 扩展名的文件您将运行脚本。此外，如果编译带有“.ts”扩展名的文件，编译器会将生成的代码写入带有“.js”扩展名的文件中，如果有的话，编译器可能会覆盖您的 javascript 文件，具体取决于告诉它输出位置的设置'.js' 文件。
【讨论】：
import {x} from './file'。看来，如果你写import {x} from './file.js'，那么它确实仍然会使用file.ts进行编译和类型检查，并生成文件名不变的js，这样它就可以工作了。
@PeterT 描述对我有用。但我仍然喜欢解释更多。在开发中，所有的配置和捆绑都是由 webpack 设置的，所以我们不需要做任何这样的事情。当我们使用 typescript 自己学习模块并想尝试基本的 typescript 编译器时，我们肯定需要这样做。
在打字稿文件导入中，像这样在导入部分包含 .js 扩展名
import {x} from 'X.js';//记得包含'.js'
【讨论】：