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

时间:2017-10-25 09:59:02

标签: reactjs webpack

每次我必须导入一个Component时,我可以使用它的绝对路径:

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]

但是这次失败了。

2 个答案:

答案 0 :(得分:0)

你可以这样做

在webpack配置

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

在您的代码中

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

希望这有帮助!

答案 1 :(得分:0)

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个文件夹中的组件,并且您可以通过它们包含组件名。
E. g。在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选项卡中&#39;姓名我不会看到ComponentA/index.jsxComponentB/index.jsx,而是看到ComponentA.jsxComponentB.jsx