在 React 中使用 webpack 递归导入组件 [英] Recursive import of components using webpack in React

问题描述

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

Each time I have to import a Component, I can either use its absolute path :

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

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

or define an alias in my webpack.config.js file :

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

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

So that I can import like this :

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

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

Now obviously, both work fine, but both are shite. Is there a way to recursively configure my webpack so that it resolves all files within my /src directory ?

我尝试过使用 modules 选项，如下所示:

I've tried using the modules option like this :

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

但这次失败得很惨.

推荐答案

在你的 src 文件夹中，你应该有类似这样的结构:

In your src folder you should have the structure similar to this:

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):

In your webpack.config.js you should have the following (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 中你可以简单地写:

As a result of using the above configuration and folder structure webpack will search for components in components folders recursively in the same way it searches for Node modules in node_modules folder and you can include components by their names.
E. g. in src/scenes/main/index.jsx you can simply write:

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、ComponentB.jsx.

P. S. I use the plugin directory-named-webpack-plugin to allow webpack to recognize files named after their parent folders as default entry points for components so in my IDE tabs' names I would not see ComponentA/index.jsx, ComponentB/index.jsx and instead see ComponentA.jsx, ComponentB.jsx.

这篇关于在 React 中使用 webpack 递归导入组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！