如何从 ReactJS 中的目录导入多个组件？

Question

我有一个包含多个 React 组件的目录。如何在一行中导入所有组件（从目录）而不在单独的 index.js

中导出组件

src/
   components/
      comp1.js
      comp2.js
      comp3.js
      comp4.js

要求：

import {comp1, comp2, comp3, comp4} from 'src/components';

是否有任何 webpack/babel 插件可以实现此目的？或者是其他东西？谢谢！

Answer 1

在组件文件夹中创建一个 index.js 文件。

src/
   components/
      comp1.js
      comp2.js
      comp3.js
      comp4.js
      index.js

index.js

如果 comp1.js 包含像 export {Comp1} 或 export const Comp1 = ()=>{} 这样的命名导出，则导出索引中的文件如下

export * from './comp1.js'
export * from './comp2.js'

如果comp1.js包含默认导出，如export default Comp1导出索引中的文件如下

export {default as Comp1} from './comp1.js'
export {default as Comp2} from './comp2.js'

现在您可以将其导入为 import {comp1, comp2, comp3, comp4} from '../components';

为了导入为 "src/components" ，你需要添加 alias 到你的 webpack 配置

Answer 2

babel-plugin-import-directory插件消除了使用index.js

可以在webpack中使用，

module: {
        rules: [
        {
            test: /\.m?js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
                loader: 'babel-loader',
                options: {
                    plugins: ['babel-plugin-import-directory']
                }
            }
        },
]}

如何从 ReactJS 中的目录导入多个组件？

How to import multiple components from a directory in ReactJS?

javascript

reactjs

webpack

es6-modules