Блог

Я создаю библиотеку компонентов пользовательского интерфейса, используя React, которая затем используется другими моими другими проектами React. У меня есть компоненты React, изложенные в этой структуре:

 components
  -- component1
       component1.js
       component1.scss
  -- component2
       component2.js
       component2.scss
  index.js
  

The index.js file просто экспортирует каждый компонент

 export component1 from './component1/component1';
export component2 from './component1/component2';
  

Когда я создаю это с помощью webpack, я получаю следующее:

  -- lib
    components.js
    components.css
  

содержащий весь код, который я затем могу импортировать в свое приложение с помощью

 import {component1} from components
  

(components.css импортируется глобально)

Все это работает нормально, но я хотел бы иметь возможность создавать их в отдельные файлы, чтобы я мог импортировать только те компоненты, которые мне нужны

 -- lib
   -- component1
       component1.js
       component1.css
  -- component2
       component2.js
       component2.css
  index.js
  

Но я все равно хотел бы иметь возможность импортировать таким же образом:

 import {component1} from components
  

Как это возможно с помощью webpack. Существуют ли какие-либо плагины, которые позволили бы это, или мне нужно было бы использовать несколько точек входа и т. Д.?