Javascript 要求与要求 .default

Posted 2023-02-22

【中文标题】Javascript 要求与要求 .default

【英文标题】：Javascript require vs require .default

【发布时间】：2017-09-01 01:00:57

【问题描述】：

我正在使用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;

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

【参考方案1】：

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

这个想法实际上很简单...... Webpack 检测到您的代码发生的变化并重新编译相应的模块。但是，它本身不能安全地替换模块引用。这就是您需要自己实现 HMR 接口的原因，因此在您的示例代码中调用了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 接口代码不能使用import，因为它不能内联工作。如果您想避免这种情况，请使用module.exports 而不是export default。