Question

大家好，我只想知道cra-app中从“反应”导入反应的机制，但是对于我的组件，我必须通过概括地定义组件文件的路径来导入它，为什么会有您的两个陈述之间的差异

import React, { Component } from 'react';
import Button from './Button';

预先感谢

Answer 1

这是因为React在内部使用Webpack来解析模块。在首次导入import React, { Component } from 'react';的过程中，Webpack将在node_modules文件夹中查找该库，因为它已为此配置了resolver。

在第二种情况下，您需要使用简短的名称（例如“ ./Button”提及路径button'或路径webpack.config.js，以告诉Webpack在{{1}内的目录中搜索/解析的位置。 }。

对于使用create-react-app创建的应用，webpack.config.js将位于node_modules/react-scripts/config/webpack.config.js。

您会注意到定义了此解析器，该解析器告诉Webpack在哪里寻找核心库：

resolve: {
      // This allows you to set a fallback for where Webpack should look for modules.
      // We placed these paths second because we want `node_modules` to "win"
      // if there are any conflicts. This matches Node resolution mechanism.
      // https://github.com/facebook/create-react-app/issues/253
      modules: ['node_modules'].concat(
        // It is guaranteed to exist because we tweak it in `env.js`
        process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
      ),
     ...
}

要为自己的路径添加别名，您可以在使用config/webpack.config.js退出应用程序后，在npm run eject中的文件中定义一个新别名（您不能撤消此操作）：

resolve: {
    alias: {
      'components' : path.resolve(__dirname, '../src/Components')
    }
  }
};

在组件中，您可以像这样导入：

import Button from 'components/Button';

Answer 2

react是通过npm安装到node_mudules中的软件包，可以通过软件包名称导入。

Button是您的自定义组件，因此必须通过其路径导入。如果您将Button打包成一个软件包，则也可以通过npm安装它。

导入组件与导入react之间的区别

2 个答案: