为什么在 reactJS 中导入组件时没有添加 .js [文件扩展名]？

Question

我们正在用 reactJS 创建不同的组件，

示例：

App.js
index.js
LandingPage.js
.....

在另一个组件中导入此组件时，我们没有添加扩展 .js

示例：

index.js:

import App from './App'

// here './App' we are not adding .js

有谁知道原因吗？

Answer 1

您的 Webpack 配置负责解析常见的扩展（即：.js 或 .jsx）。如果您的项目正在使用 create-react-app，那么这已经在幕后为您完成了。

Create-react-app 已经自动解析了以下扩展：

extensions: [".web.js", ".mjs", ".js", ".json", ".web.jsx", ".jsx"],

Answer 2

这一切都是通过 webpack 模块解析完成的，resolver 是一个库，可以帮助通过绝对路径定位模块。

依赖模块可以来自应用程序代码或第三方库。解析器帮助 webpack 为每个这样的 require/import 语句找到需要包含在包中的模块代码。 webpack 在捆绑模块时使用 enhanced-resolve 解析文件路径。

根据上述规则解析路径后，解析器会检查路径是否指向文件或目录。如果路径指向一个文件：

Resolve extensions: 这些选项改变了模块的解析方式。 webpack 提供合理的默认值，但可以详细更改解析。

在webpack.config.js

module.exports = {
  //...
  resolve: {
    enforceExtension: false
  }
};

如果这里的值为true，则不允许无扩展名的文件。因此，默认情况下，如果 ./foo 具有 .js 扩展名，则 require('./foo') 有效，但启用此 (enforceExtension) 后，仅 require('./foo.js') 有效。

Answer 3

在 webpack.config.js

中将 .js 添加到 resolve/extensions

resolve: {
  extensions: [".ts", ".js", ".mjs", ".json"],
  symlinks: false,
  cacheWithContext: false,
},

Why .js [file Extension] is not added while importing a component in reactJS?