javascript import 如何找到没有扩展名的模块? [英] How does javascript import find the module without an extension?

问题描述

我知道我们可以使用 import {x} from "./file" 并且变量 x 将从同一目录中的 file.js 导入.如果目录中有不同扩展名的同名文件，如何处理?

I understand that we can use import {x} from "./file" and a variable x will be imported from file.js in the same directory. How is this handled if there are files of the same name with different extensions in the directory?

例如，如果file.js和file.ts在同一个目录下，import {x} from "./file"会怎样?它会取决于javascript的版本吗?

For example, if there were file.js and file.ts in the same directory, how would import {x} from "./file" behave? Would it depend on the version of javascript?

推荐答案

是否取决于 javascript 的版本?

Would it depend on the version of javascript?

不，这取决于 JavaScript 运行时的行为，即执行脚本的东西.

No, it depends on the behavior of JavaScript runtime, that is, the thing that executes your script.

在支持 ES 模块 (ESM) 的浏览器中，不会向您import 的 URL 添加任何扩展名 - 例如，如果您的文件具有 .js 扩展名，你必须写import {x} from "./file.js".浏览器没有有用的方法来查找服务器上可用扩展名的文件.

In a browser with support for ES Modules (ESM), no extensions will be added to the URL that you import - if your file for example has .js extension, you have to write import {x} from "./file.js". Browsers have no useful way of looking up which files with which extensions are available on the server.

在没有本地支持 ESM 的浏览器中，您必须将模块转换为可以在浏览器中运行的捆绑格式.在这种情况下，这取决于您选择使用的特定打包程序的行为(见下文).

In browsers without native support for ESM, you have to transpile your modules to a bundled format which can run in browser. In this case, it depends on the behaviour of the specific bundler you choose to use (see below).

在支持 ESM 的 Node.js 版本中，运行时不会搜索扩展，但会按名称从 node_modules 解析模块.例如 import 'lodash' 可以解析为 ./node_modules/lodash/index.mjs，而无需知道 index.mjs 的扩展名代码>.

In Node.js versions which support ESM, the runtime will not search for extensions, but it will resolve modules from node_modules by name. For example import 'lodash' could resolve to ./node_modules/lodash/index.mjs, without you needing to know that the extension of index.mjs.

在不支持 ESM 的 Node.js 版本中，您不能使用 import - 您必须先将模块转换为 CommonJS 格式，这将最终使用 require.require 有一个扩展名列表，它将在文件系统中搜索.

In Node.js versions which do not support ESM, you can't use import - you have to transpile the module to CommonJS format first, which will end up using require. require has a list of extensions that it will search the filesystem for.

例如，如果file.js和file.ts在同一个目录下，import {x} from "./file"会怎样?

For example, if there were file.js and file.ts in the same directory, how would import {x} from "./file" behave?

这取决于.

当您转译或编译脚本时，识别哪些扩展取决于编译器和您为编译提供的设置.

When you transpile or compile your script, which extensions are recognized depends on the compiler and the settings you provide for compilation.

例如，在 webpack 中，有支持扩展的预定义列表 - '.wasm', '.mjs', '.js', '.json'，但可以使用 resolve.extension 设置.

In webpack, for example, there is predefined list of supported extensions - '.wasm', '.mjs', '.js', '.json', but it could be changed by using resolve.extension setting in your webpack.config.js file.

如果您将 webpack 与 ts-loader 插件一起使用，.ts 文件扩展名也被识别，但加载器会尝试使 .ts 文件被编译成 .js 文件，并将打包时尝试使用编译后的 .js 文件.

If you use webpack with ts-loader plugin, .ts file extension is also recognized, but the loader will try to make it so that .ts file is compiled into .js file, and will try to use that compiled .js file when bundling.

如果你使用普通的 typescript 编译器来编译你的脚本，编译器会寻找一个扩展名为 '.ts' 的文件来执行类型检查，但它会生成代码，当您将运行脚本.此外，如果编译带有.ts"扩展名的文件，编译器将在带有.js"扩展名的文件中写入生成的代码，并且可能会覆盖您的 javascript 文件(如果有)，具体取决于告诉它输出位置的设置'.js' 文件.

If you use plain typescript compiler to compile your scripts, the compiler will look for a file with '.ts' extension to perform type checking, but it will generate code which will look for a file with '.js' extension when you will run the script. Also, if the file with '.ts' extension is compiled, the compiler will write generated code in the file with '.js' extension and may overwrite your javascript file if you have one, depending on the setting which tells it where to output '.js' files.

这篇关于javascript import 如何找到没有扩展名的模块?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！