Генерация React-компонентов в пределах <Switch>из массива, не работающего в производственной сборке - PullRequest
Новая
       9

Генерация React-компонентов в пределах <Switch>из массива, не работающего в производственной сборке

0 голосов
/ 04 июля 2019

У меня есть какой-то особый случай, чтобы представить его вам.

Я загрузил свой проект веб-приложения с create-реагировать-приложение 3 и довольно далеко в разработке.И это как раз ключевая фраза, поскольку моя проблема не в разработке, а в производстве.

Чтобы включить простой способ вставки компонентов React в мой исходный код, для будущих разработчиков я рендерим React-Component-childrenпутем рендеринга их один за другим из массива. 

const components = [Home, Contact, Privacy, Help];

<Switch>
    {components.map((Component, i) => {
        return (
            <Route
                key={Component.name + i}
                path={`/${Component.name.toLowerCase()}`}
                render={props => (
                    <Component
                        {...props}
                        index={i}
                        popIndex={this.popIndex}/>
                )}
            />
        );
    })}     
</Switch>

Рендеринг этих компонентов работает абсолютно нормально, когда я занимаюсь разработкой, в то время как исходный код отображается с узлом (запуск пряжи) на localhost.

Но как только я разверну свою производственную сборку (со сборкой пряжи) через NGINX, docker или serve, мой код больше не будет работать, так как сами фактические компоненты не отображаются, и я получаю исключения, когдаобновить страницу и щелкнуть по одному из моих динамически создаваемых маршрутов.(URL-адрес выглядит следующим образом: / undefined / services вместо / home / services

Я знаю, что эти фрагменты кода являются проблемой, поскольку переключение их с помощью «жестко закодированных» компонентов решает проблему.

Я не получаю никаких сообщений об ошибках в консоли разработчика или в терминале при запуске производственной сборки с использованием пряжи.

РЕДАКТИРОВАТЬ: Мне удалось найти простое решение, главной проблемой была моя зависимость от "Component.name". Так как CRA связан с webpack и babel, он использует минификацию и сжатие, в результате чего имена компонентов искажаются и уменьшаются до простых букв.

I 'Мы удалили проект и позволили компрессору (в данном случае terser) исключить имена классов из минимизации.

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

В webpack.config.js 

[...]
terserOptions: {
    [...]
    keep_classnames: true,
    keep_fnames: true
...