Pytanie JavaScript wymagają vs wymagają .default


używam reagujący na hot-loader i jestem bardzo zdezorientowany jego przykładowym kodem:

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')
    );
  });
}

To, czego nie lubię, to:

a) Dlaczego muszę korzystać z aplikacji i NextApp? Nie jest App taki sam jak NextApp, ponieważ są one importowane z tego samego pliku?

b) Sądziłem, że najlepsze praktyki należy zachować requires na początku kodu. Ale już mam import App from '../containers/App". Więc:

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

Nie powinno App i NextApp być takim samym ?

c) Aby zakończyć, czy poniższe linie kodu są równoważne? Jaka jest różnica za pomocą czystej require i a require .default  ?

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

Przepraszam, jeśli to są bardzo podstawowe pytania, ale potrzebuję podpowiedzi, gdzie iść, aby lepiej zrozumieć ten kod.


12
2018-04-06 06:47


pochodzenie




Odpowiedzi:


Aby to lepiej zrozumieć, musisz przyjrzeć się, jak webpack oferuje ładowanie gorącego modułu w przypadku innych przypadków braku reakcji.

Pomysł jest dość prosty ... Webpack wykrywa zmiany zachodzące w twoim kodzie i rekompiluje odpowiednie moduły. Jednak nie może bezpiecznie zastąpić odniesień do modułów w locie. Dlatego musisz sam wdrożyć interfejs HMR, stąd module.hot wywołaj swój przykładowy kod.

Gdy dostępna jest nowsza wersja modułu, Webpack przechodzi do łańcucha modułów (tzn. Jeśli X zaimportował Y i Y uległo zmianie, to pakiet rozpoczyna się od X> W> V ...), dopóki nie znajdzie modułu, który zaimplementował HMR dla Y lub X lub W lub V itd. Następnie odświeża cały łańcuch.

Jeśli dojdzie do katalogu głównego bez akceptowania zmiany przez HMR, odświeża całą stronę :).

Teraz kwestią aplikacji i NextApp ... App jest statycznie zaimportowana wersja twojego modułu. Ponieważ moduły są analizowane i ładowane tylko raz domyślnie, aplikacja wskazuje stałe odwołanie, które nigdy się nie zmienia. Dlatego w przykładzie, który otrzymuje zmieniony moduł w kodzie HMR, używana jest kolejna zmienna NextApp.

Na koniec, require and require.default ... w przypadku importowania ES6 (export domyślny MyComponent), wyeksportowany moduł ma format {"default": MyComponent}. The import instrukcja poprawnie obsługuje to zadanie dla ciebie, jednak musisz to zrobić require("./mycomponent").default nawróć się. Kod interfejsu HMR nie może być użyty import ponieważ nie działa w linii. Jeśli chcesz tego uniknąć, użyj module.exports zamiast export default.


10
2018-04-06 08:10