在导入 JavaScript 模块时,我们什么时候需要添加文件扩展名?

导入模块时,我注意到有时导入的文件有其扩展名,例如:

import { myFunc } from './foo.js';

而其他库,导入不会:

import { myFunc } from './foo';

这与 ES 模块和 CommonJS 模块有关吗?

stack overflow When do we need to add file extension when importing JavaScript modules?
原文答案
author avatar

接受的答案

这取决于您的运行时和编译环境,还取决于您使用的是 ES 模块( import 语法)还是 CommonJS 模块( require 语法)。下面是最常见情况的概述:

  • Webpack(由 Create React App 和其他工具使用)与 ES 模块一起使用,如下所示:

如果路径具有文件扩展名,则文件会立即捆绑。否则,使用 resolve.extensions 选项解析文件扩展名,该选项告诉解析器哪些扩展名可以被解析,例如 .js.jsx 。更多关于官方的 doc

  • 如果你在 Node.js 或浏览器中使用 ES 模块,没有任何编译步骤:

使用 import 关键字解析相对或绝对说明符时,必须提供文件扩展名...这种行为与 import 在浏览器环境中的行为方式相匹配...更多关于官方 doc 的信息。

  • 如果您在 Node.js 中使用 CommonJS 模块:

如果未找到确切的文件名,则 Node.js 将尝试加载所需的文件名并添加扩展名: .js.json ,最后是 .node 。更多关于官方的 doc


答案: