Javascript require 与 require .default

Question

我正在使用react-hot-loader我对其示例代码感到非常困惑:

import React from 'react'
import ReactDOM from 'react-dom'
import { AppContainer } from 'react-hot-loader'
import App from './containers/App'

ReactDOM.render(
  <AppContainer>
    <App/>
  </AppContainer>,
  document.getElementById('root')
);

// Hot Module Replacement API
if (module.hot) {
  module.hot.accept('./containers/App', () => {
    const NextApp = require('./containers/App').default;
    ReactDOM.render(
      <AppContainer>
        <NextApp/>
      </AppContainer>,
      document.getElementById('root')
    );
  });
}

我不明白的是:

a) 为什么我需要使用 App 和 NextApp ？不是App与 NextApp 相同，因为它们是从同一个文件导入的？

b) 我认为最佳实践是保留 requires在代码的开头。但我已经有了import App from '../containers/App '。所以:

import App from './containers/App'
const NextApp = require('./containers/App').default;

不应该App和NextApp一样吗？

c) 最后，以下代码行是否等效？使用纯的有什么区别require和一个 require .default ？

const NextApp = require('./containers/App');
const NextApp = require('./containers/App').default;

抱歉，如果这些是非常基本的问题，但我需要提示如何更好地理解这段代码。

Answer 1

为了更好地理解这一点，您需要看看如何 webpack offers hot module loading对于其他非 react 情况。

这个想法实际上很简单...Webpack 检测代码发生的更改并重新编译相应的模块。但是，它无法安全地动态替换模块引用本身。这就是为什么您需要自己实现 HMR 接口(interface)，因此示例代码中需要调用 module.hot 。

当模块有新版本可用时，Webpack 会沿着模块链向上(即，如果 X 导入 Y 并且 Y 已更改，则 webpack 开始从 X > W > V...)，直到找到一个模块为 Y 或 X 或 W 或 V 等实现 HMR。然后它从那里重新加载整个链。

如果它到达根目录而没有任何 HMR 接受更改，则会刷新整个页面:)。

现在 App 和 NextApp 的问题... App 是模块的静态导入版本。由于默认情况下模块仅被解析和加载一次，因此 App 指向一个永远不会改变的常量引用。这就是为什么在示例中使用另一个变量 NextApp 来接收 HMR 代码中更改的模块。

最后，require 和 require.default...在处理 ES6 导入(导出默认 MyComponent)时，导出的模块的格式为 {"default": MyComponent}。 import 语句可以正确地为您处理此分配，但是，您必须自己执行 require("./mycomponent").default 转换。 HMR 接口(interface)代码无法使用 import，因为它不能内联工作。如果您想避免这种情况，请使用 module.exports 而不是 export default。