Javascript require vs require .default [英] Javascript require vs require .default

问题描述

我正在使用 react-hot-loader 和我对它的示例代码非常困惑:

I'm using react-hot-loader and I'm very confused about its example code:

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 不同，因为它们是从同一文件导入的?

a) Why do I need to use App and NextApp ? Isn't App the same as NextApp, as they are imported from the same file ?

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

b) I thought best practices would be to keep requires at the beginning of the code. But there I have already import App from '../containers/App'. So:

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

App 和 NextApp 是否应该相同?

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

c) To finish, is the following code lines equivalent ? What's the difference using a pure require and a require .default ?

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

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

Sorry if those are very basic questions, but I need a hint on where to go to better understand this code.

推荐答案

要更好地理解这一点，您需要查看

To understand this better, you need to look at how webpack offers hot module loading for other non-react cases.

这个想法实际上很简单... Webpack可以检测到代码中发生的更改并重新编译相应的模块.但是，它不能安全地即时替换模块引用.这就是为什么您需要自己实现HMR接口，因此在示例代码中调用 module.hot 的原因.

The idea is quite simple actually... Webpack detects changes happening to your code and recompiles the corresponding modules. However, it cannot safely replace the module references on the fly itself. This is why you need to implement the HMR interface yourself, hence the module.hot call in your example code.

当有较新版本的模块可用时，Webpack会向上移动模块链(即，如果X导入的Y并且Y已更改，则Webpack将从X> W> V ...开始运行)，直到找到一个模块对Y或X或W或V等实施HMR.然后从那里重新加载整个链.

When a newer version of a module is available, Webpack goes up the modules chain (i.e., if X imported Y and Y has changed, webpack starts going from X > W > V...) till it finds a module which implemented HMR for Y or X or W or V etc. Then it reloads the entire chain from there.

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

If it reaches the root without any HMR accepting the change, it refreshes the entire page :).

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

Now The matter of App and NextApp... App is the statically imported version of you module. As modules are parsed and loaded only once by default, App points to a constant reference which never changes. This is why another variable NextApp is used in the example which receives the changed module within the HMR code.

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

Finally, the require and require.default... when dealing with ES6 imports (export default MyComponent), the exported module is of the format {"default" : MyComponent}. The import statement correctly handles this assignment for you, however, you have to do the require("./mycomponent").default conversion yourself. The HMR interface code cannot use import as it doesn't work inline. If you want to avoid that, use module.exports instead of export default.

这篇关于Javascript require vs require .default的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！