javascript - 当 ES6 代码中同时存在 `import` 和 `require` 指令时，Webpack 捆绑代码崩溃

Question

我们的 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 图标集合。

最近我们意识到需要有内部构建，其中不发生动态导入并支付更大的 bundle 的价格。以下代码已放入我们的图标代码中(与上面的动态导入一起):

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

两种加载策略在一次使用时都能正常工作。当它们共存于图标组件时就会出现问题。

我已经验证 import 指令导致 Webpack 在包中创建在我看来似乎是使用以下命令生成的合成 JS 文件:

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

当 import 和 require 指令都出现在 Icon 组件中时，合成文件与遇到单独的 import 时不同。

详细来说，合成文件中名为 map 的对象包含的值是在 import 情况下具有 3 个元素的数组，在 import 情况下具有 2 个元素+需要大小写；合成代码试图访问第三个元素，但一切都崩溃了。

有人可以评论这个问题吗？

Answer 1

我找到了答案，你可以查看我的完整答案here长话短说，我基于列表导入并将所有导入的组件置于组件状态。之后，我从存储的导入组件创建了 React.createElememt，并将它们全部拉到 Render

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);
                    }))
        }
    }