相关疑难解决方法(0)

使用ES6,我可以从这样的文件中导入几个导出:

import {ThingA, ThingB, ThingC} from 'lib/things';

但是,我喜欢每个文件有一个模块的组织.我最终得到这样的导入:

import ThingA from 'lib/things/ThingA';
import ThingB from 'lib/things/ThingB';
import ThingC from 'lib/things/ThingC';

我希望能够做到这一点:

import {ThingA, ThingB, ThingC} from 'lib/things/*';

或类似的东西,理解的约定是每个文件包含一个默认导出,并且每个模块的名称与其文件相同.

这可能吗？

所以这是我目前通过ES6在webpack中导入图像和图标的工作流程:

import cat from './images/cat1.jpg'
import cat2 from './images/cat2.svg'
import doggy from './images/doggy.png'
import turtle from './images/turtle.png'

<img src={doggy} />

这很快变得混乱.这就是我想要的:

import * from './images'

<img src={doggy} />
<img src={turtle} />

我觉得必须有一些方法动态导入特定目录中的所有文件,因为他们的名称没有扩展名,然后根据需要使用这些文件.

有人看过这个,或者对最好的方法有任何想法吗？

更新:

使用选定的答案,我能够这样做:

function importAll(r) {
  let images = {};
  r.keys().map((item, index) => { images[item.replace('./', '')] = r(item); });
  return images;
}

const images = importAll(require.context('./images', false, /\.(png|jpe?g|svg)$/));

<img src={images['doggy.png']} />