导入JavaScript模块时什么时候需要添加文件扩展名？

Question

导入模块时，我注意到有时导入的文件有扩展名，例如：

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

而其他库，导入不会：

import { myFunc } from './foo';

这与 ES 模块与 CommonJS 模块有关吗？

Answer 1

这取决于您的运行时和编译环境，还取决于您使用的是 ES 模块（import语法）还是 CommonJS 模块（require语法）。下面是最常见案例的概述：

• Webpack（由Create React App和其他工具使用）与 ES 模块一起使用，如下所示：

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

• 如果您在 Node.js 中或在浏览器中使用 ES 模块而无需任何编译步骤：

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

• 如果您将 CommonJS 模块与 Node.js 一起使用：

如果未找到确切的文件名，Node.js 将尝试加载所需的文件名并添加扩展名：.js、.json和 finally .node。更多关于官方文档。