在 React 中使用 webpack 递归导入组件答案

【问题标题】：Recursive import of components using webpack in React在 React 中使用 webpack 递归导入组件
【发布时间】：2018-04-06 08:45:53
【问题描述】：

每次我必须导入一个组件时，我可以使用它的绝对路径：

import ProductDescription from '../../ProductDescription';

或者在我的webpack.config.js 文件中定义一个别名：

alias: {
    app: 'components/app',
    home: 'components/home',
    utility: 'components/common/utility',
    textService: 'services/textService'
},

这样我就可以像这样导入：

import Home from 'home';
import Utility from 'utility';

现在显然，两者都可以正常工作，但两者都很糟糕。有没有办法递归配置我的 webpack 以便它解析我的 /src 目录中的所有文件？

我试过像这样使用modules 选项：

modules: ['node_modules', 'src', paths.appNodeModules]

但这次失败得很惨。

【问题讨论】：

使用 typescript 会变得更糟 - typescript 不会发现向 webpack 添加别名，除非您还使用相同的定义文件创建。对你拥有的东西感到满意:) - 顺便说一句：通常在较大的应用程序中，每个目录中都有一个index.js 文件，该文件从它自己的文件夹中导出一组组件。为这些索引创建别名，它非常漂亮。

标签： reactjs webpack

【解决方案1】：

你可以这样做

在 webpack 配置中

alias: {
  components: 'components', // base path to components
},

在您的代码中

import Header from 'components/header'
import Footer from 'component/footer'

希望这会有所帮助！

【讨论】：

这正是我在示例中使用别名的方式：D
不，你声明别名一次并导入相对于别名的组件。您不会为每个新导入更改别名。 :)

【解决方案2】：

在您的src 文件夹中，您应该具有类似于以下的结构：

src
└ scenes
  ├ components
  │ ├ ComponentA
  │ │ └ ComponentA.jsx
  │ └ ComponentB
  │   └ ComponentB.jsx
  └ main
    ├ components
    │ └ App
    │   ├ components
    │   │ ├ ComponentC
    │   │ │ └ ComponentC.jsx
    │   │ └ ComponentD
    │   │   └ ComponentD.jsx
    │   └ App.jsx
    └ index.jsx

在您的webpack.config.js 中，您应该有以下内容（Webpack 3）：

const DirectoryNamedWebpackPlugin = require('directory-named-webpack-plugin');
...
let config = {
  ...
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  },
  resolve: {
      modules: ['components', 'node_modules'],
      extensions: ['.js', '.jsx'],
      plugins: [
          new DirectoryNamedWebpackPlugin(true)
      ]
  }
  ...
}
modules.exports = config;

由于使用上述配置和文件夹结构，webpack 将递归搜索 components 文件夹中的组件，就像它在 node_modules 文件夹中搜索 Node 模块一样，您可以按名称包含组件。
例如。在src/scenes/main/index.jsx 你可以简单地写：

import App from 'App';

在src/scenes/main/components/App/App.jsx你可以写：

import ComponentC from 'ComponentC';
import ComponentD from 'ComponentD';

在src/scenes/main/components/App/components/CompoentC/ComponentC.jsx 你可以写：

import ComponentA from 'ComponentA';
import ComponentB from 'ComponentB';

P. S. 我使用插件 directory-named-webpack-plugin 允许 webpack 识别以其父文件夹命名的文件作为组件的默认入口点，因此在我的 IDE 选项卡名称中我不会看到 ComponentA/index.jsx、ComponentB/index.jsx 而是看到 ComponentA.jsx、@ 987654337@.

【讨论】：