为什么在 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"],

更多信息在这里 https://github.com/webpack/docs/wiki/Configuration#resolveextensions

Answer 2

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

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

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

• 如果路径具有文件扩展名，则文件会直接捆绑。
• 否则，将使用 resolve.extensions 选项解析文件扩展名，该选项告诉解析器哪些扩展名可用于解析，例如.js、.jsx。

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

在webpack.config.js

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

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