reactjs - 如何让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 block 不起作用。 Chrome 告诉我:

Uncaught (in promise) Error: Cannot find module "./containers"

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

WARNING in ./node_modules/babel-loader/lib?{"cacheDirectory":"/usr/local/myproject/cache/babel","forceEnv":"development"}!./assets/scripts/app/react_loader.js Module not found: Error: Can't resolve './containers' in '/usr/local/myproject/assets/scripts/app'

如果我尝试接受 ./containers/${component} 那么我会收到运行时错误:

Ignored an update to unaccepted module ./assets/scripts/lib/components/bpm/MyClientProcessMenu.jsx -> ./assets/scripts/lib/components/bpm/MyClientProcessMenuLoader.jsx -> ./assets/scripts/app/containers/MyClientProcessMenuContainer.jsx -> ./assets/scripts/app/containers lazy recursive ^./.$ -> ./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 recursive ./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);

客户端.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);
}