如何让 react-hot-loader 使用动态导入？

Question

我看到了 this answer，它展示了如何让 react-hot-loader 使用 import() 语法，但在我的情况下，我直到运行时才知道文件名。

这是我得到的：

export default function(component, props, mountPoint) {

    function render() {
        import(`./containers/${component}`).then(({default: Component}) => {
            ReactDOM.render(
                <AppContainer>
                    <ErrorBoundary>
                        <Component {...props}/>
                    </ErrorBoundary>
                </AppContainer>, document.getElementById(mountPoint || 'react-root'));
        });
    }

    render();

    if(module.hot) {
        module.hot.accept('./containers', () => {
            render();
        });
    }

}

第一次加载工作正常，只是 module.hot 块不起作用。 Chrome 告诉我：

未捕获（承诺中）错误：找不到模块“./containers”

我的终端告诉我同样的事情：

./node_modules/babel-loader/lib 中的警告？{"cacheDirectory":"/usr/local/myproject/cache/babel","forceEnv":"development"}!./assets/scripts/app/ react_loader.js 找不到模块：错误：无法解析“/usr/local/myproject/assets/scripts/app”中的“./containers”

如果我尝试接受 ./containers/${component}，则会收到运行时错误：

忽略对未接受模块的更新 ./assets/scripts/lib/components/bpm/MyClientProcessMenu.jsx -> ./assets/scripts/lib/components/bpm/MyClientProcessMenuLoader.jsx -> ./assets/scripts/app /containers/MyClientProcessMenuContainer.jsx -> ./assets/scripts/app/containers 惰性递归 ^./.$ -> ./node_modules/babel-loader/lib/index.js?{"cacheDirectory":"/ usr/local/myproject/cache/babel","forceEnv":"development"}!./assets/scripts/app/react_loader.js -> ./node_modules/bundle-loader/index.js!./assets/scripts /app/react_loader.js -> ./assets/scripts/app 递归 ./node_modules/bundle-loader/index.js!./ ^​​./.$ -> ./assets/scripts/lib/webpack .js -> ./assets/main.js -> 0

并且没有更新发生。

如何“接受”动态组件？

Answer 1

我认为如果不复制代码，目前不支持此功能。作为一种解决方法，您可以创建两个文件，一个用于动态导入的生产环境，另一个不用于开发的动态导入。

动态导入的文件必须仅包含在生产中。这就是将环境逻辑移动到不同文件（index.js）中的原因

index.js

// Neded because HMR doesn't work with dynamic import for languages
let app;
if (process.env.NODE_ENV === 'development') {
  app = require('./development').default;
} else {
  app = require('./production').default;
}
app(component);

client.js

export default function(Component) {

    function render() {
       ReactDOM.render(
         <AppContainer>
           <Component />
         </AppContainer>, document.getElementById('react-root'));
    }

    render();

    if(module.hot) {
        module.hot.accept('./containers', () => {
            render();
        });
    }
}

生产.js

import client from './client';


export default function (component) {
  import(`./containers/${component}`).then(Component => {
    client(Component)
  });
}

开发.js

import client from './client';

export default function (component) {
  const Component = require(`./containers/${component}`);

  client(Component);
}