我知道我们可以使用并且将从同一目录中导入import {x} from "./file"
一个变量。如果目录中存在具有不同扩展名的同名文件,如何处理?x
file.js
例如,如果有file.js
和file.ts
在同一个目录中,会如何import {x} from "./file"
表现?它会取决于 JavaScript 的版本吗?
我知道我们可以使用并且将从同一目录中导入import {x} from "./file"
一个变量。如果目录中存在具有不同扩展名的同名文件,如何处理?x
file.js
例如,如果有file.js
和file.ts
在同一个目录中,会如何import {x} from "./file"
表现?它会取决于 JavaScript 的版本吗?
它会取决于javascript的版本吗?
不,这取决于 JavaScript 运行时的行为,即执行脚本的东西。
在支持 ES 模块 (ESM) 的浏览器中,不会将扩展名添加到您的 URL import
- 例如,如果您的文件具有.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',但可以通过在文件中使用resolve.extension设置来更改它。webpack.config.js
如果你使用webpack
ts -loader插件,.ts
文件扩展名也会被识别,但是加载器会尝试使.ts
文件被编译成文件,并且在捆绑时.js
会尝试使用那个编译的文件。.js
如果你使用普通的 typescript 编译器来编译你的脚本,编译器会寻找一个带有“.ts”扩展名的文件来执行类型检查,但是它会生成一个代码,当你运行时会寻找一个带有“.js”扩展名的文件剧本。此外,如果编译带有“.ts”扩展名的文件,编译器会将生成的代码写入带有“.js”扩展名的文件中,如果有的话,编译器可能会覆盖您的 javascript 文件,具体取决于告诉它输出位置的设置'.js' 文件。
@PeterT 描述与我合作。但我仍然喜欢解释更多。在开发中,所有的配置和捆绑都是由 webpack 设置的,所以我们不需要做任何这样的事情。当我们使用 typescript 自己学习模块并想尝试基本的 typescript 编译器时,我们肯定需要这样做。
在打字稿文件导入中,在导入部分中包含 .js 扩展名,如下所示
import {x} from 'X.js';//记得包含 '.js'