Expo Web으로 빠르게 새로 고침! 🏃🏻‍♂️🔄

최근에 iOS 또는 Android에서 Expo를 사용했다면 개발 중에 상태 저장 핫 리로딩을 달성하기 위해 Fast Refresh(by Dan Abramov)를 사용했을 것입니다. 그러나 웹용 Expo에서 Fast Refresh를 어떻게 사용합니까?..(아주 쉽게).

웹에서는 페이지를 다시 로드하지 않고 DOM을 업데이트합니다. 이는 상태가 업데이트 간에 동일하게 유지됨을 의미합니다. 완전히 업데이트하려면 ⌘ + R로 창을 새로고침하면 됩니다.

🤔 사용방법

현재 공식 Fast Refresh Webpack 플러그인은 없지만 Michael Mok의 훌륭한 커뮤니티 플러그인을 사용하여 오늘 시작할 수 있습니다!

새로운 범용 React Native 프로젝트 부트스트랩:

엑스포:expo init 그런 다음 프로젝트

를 선택합니다.

기타: npx create-react-native-app

커뮤니티 빠른 새로 고침 패키지를 설치합니다.

yarn add -D @pmmmwh/react-refresh-webpack-plugin webpack-hot-middleware

Webpack 구성을 꺼냅니다.

expo customize:web

새로 생성된 webpack.config.js:

const createExpoWebpackConfigAsync = require("@expo/webpack-config");
const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);

  // Use the React refresh plugin in development mode
  if (env.mode === "development") {
    config.plugins.push(
      new ReactRefreshWebpackPlugin({ disableRefreshCheck: true })
    );
  }

  return config;
};

이제 귀하의 babel.config.js:

module.exports = function (api) {
  // This caches the Babel config by environment.
  api.cache.using(() => process.env.NODE_ENV);

  return {
    presets: ["babel-preset-expo"],
  };
};