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

问题描述

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

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"的行为如何?

要视情况而定.

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

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'，但可以使用webpack.config.js文件中的noreferrer> 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'的文件以执行类型检查，但是当生成扩展名为'.js'的文件时，编译器将生成代码您将运行脚本.另外，如果编译了扩展名为".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导入如何找到没有扩展名的模块?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！