Код, связанный с Webpack, дает сбой, когда в коде ES6 присутствуют инструкции `import` и` require` - PullRequest
Новая
       27

Код, связанный с Webpack, дает сбой, когда в коде ES6 присутствуют инструкции `import` и` require`

3 голосов
/ 29 мая 2019

Наш пакет Webpack содержит заполнители для динамического импорта значков.Пример динамического импорта выглядит следующим образом: 

const { icon: iconName } = this.props;
const faIconName = `fa${iconName.replace(/./, c => c.toUpperCase())}`;

import(
  /* webpackInclude: /\.js$/ */
  `@fortawesome/pro-light-svg-icons/${faIconName}`
).then(faIcon => {
  if (this.mounted) {
    this.setState({ faIcon });
  }
});

Мы решили использовать эту стратегию для предотвращения объединения в Webpack всей коллекции значков FontAwesome.

Совсем недавно мы поняли, чтонужно иметь внутренние сборки, где не происходит динамический импорт, и платить цену большего пакета.Следующий код был помещен в наш код иконки (наряду с динамическим импортом, указанным выше): 

const faIconName = `fa${iconName.replace(/./, c => c.toUpperCase())}`;
let faIcon;
try {
  faIcon = require(`@fortawesome/pro-light-svg-icons/${faIconName}.js`)[faIconName];
} catch (e) {}

Обе стратегии загрузки работают нормально, если используются по одной .Проблема возникает, когда они сосуществуют в компоненте icon.

Я убедился, что инструкция import побуждает Webpack создать в комплекте то, что мне кажется синтетическим файлом JS, созданным с помощью команды: 

webpack:/// ./node_modules/@fortawesome/pro-light-svg-icons lazy ^\.\/.*$ include: \.js$ namespace object

Когда в компоненте Icon присутствуют инструкции import и require, синтетический файл отличается от того, когда встречается подошва import.

Подробно, объект, называемый map в синтетическом файле содержит значения, которые являются массивами с 3 элементами в случае import и с 2 элементами в случае import+require;синтетический код пытается получить доступ к третьему элементу, и все падает.

Кто-нибудь может прокомментировать эту проблему?

1 Ответ

1 голос
/ 07 июня 2019

Я нашел ответ, вы можете проверить мой полный ответ здесь Если коротко, я импортировал на основе списка и перевел все импортированные компоненты в состояние Компонента.После этого я создал React.createElememt из сохраненных импортированных компонентов и вытащил их все для визуализации 

componentDidMount = () => {
//we get elements list from any source to redux-store
        this.props.getForms();
//access redux-store to the list
        const forms = this.props.configBody.sets;
//make deep object copy
        const updatedState = { ...this.state };
        updatedState.modules = [];
        if (forms) {
//here is the very dynamic import magic: we map the import list and prepare to store the imports in Component`s state
            const importPromises = forms.map(p =>
                import(`../TemplateOrders/Template${p.order}`)
                    .then(module => {
                        updatedState.modules.push(module.default)
                    })
                    .catch(errorHandler(p))
            )
//wait till all imports are getting resolved
            Promise.all(importPromises)
                .then(res =>
//then run setState
                    this.setState({ ...updatedState }, () => {
                        console.log(this.state);
                    }))
        }
    }
...