Dynami c Webpack требует содержимое из папки - PullRequest
Новая
       20

Dynami c Webpack требует содержимое из папки

0 голосов
/ 21 января 2020

Для каждого основного React компонента у меня есть папка компонентов, которая находится рядом с ним. Внутри каждого основного компонента я должен import каждый компонент из папки компонентов отдельно. Я пытаюсь настроить некоторый код, который автоматически требует, чтобы все компоненты из папки компонентов были помещены в файл / область / среду основных компонентов. 

const app = require.context(".", true, /^\.\/.*\jsx$/)
const mainComponentFile = app('./path/to/file')
const components = require.context('./path/to/file/components', true, /^\.\/.*\jsx$/)
components.keys().forEach((x) => {
  mainComponentFile.require(x) // I know this doesn't work, my question is how can I do this?
})

Я вижу замыкания для каждого модуля, определенного в [[Scopes]] но я не могу получить доступ к этому объекту программно (я читал почему в других SO).

Обновление

У меня есть точное решение, которое я искал, и я обновлю этот вопрос на выходных с ответом. Короче говоря, вам нужно создать загрузчик Webpack, который изменяет источник, программно помещая в него строки import. Он не редактирует сам файл, а только источник кода в строковом формате, прежде чем он будет отправлен для компиляции через веб-пакет. Общее решение не слишком сложное, но для вашего здравого смысла, если только вы не хотите сделать что-то очень динамичное c, go для решения, упомянутого в комментариях @xadm: babel-plugin-import-directory

1 Ответ

0 голосов
/ 21 января 2020

Я бы настроил скрипт сборки, который генерирует все импортные файлы для вас на основе найденных файлов компонентов.

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

export { Card } from './components/card';
export { Button } from './components/button';

И затем вы можете импортировать их в свой основной компонент и использовать их по своему усмотрению

Помогает ли это?

...