Молниеносная реакция-обновление

React.js

Amway недавно выпустила последний подключаемый модуль быстрого обновления. Сегодня Amway предоставит вам все react-refresh-webpack-plugin, сейчас на гитхабе1.4k starохватывать

представлять

  1. Горячее обновление означает, что нет необходимости обновлять страницу, проще говоря, это означает, что когда вы используете реакцию для написания кода, измененная часть может быть автоматически обновлена. Но это отличается от автообновления веб-страницы, потому что горячий загрузчик не обновляет веб-страницу, а просто заменяет измененную вами часть, т.е. без потери состояния
  2. На официальном сайте этого плагина также сказано, что он не на 100% стабилен, но после его использования я обнаружил серьезные проблемы.

совместимость

полагаться самый низкий оптимальный
react 16.9.0 16.13.0+
react-dom 16.9.0 16.13.0+
react-reconciler 0.22.0 0.25.0+
webpack 4.0.0 (для 0.3.x) 4.43.0 (для 0.4.x+ 4.43.0+

Видно, что текущая версия предъявляет высокие требования, но она пока в первой версии, и я надеюсь, что старый проект можно будет использовать в будущем.

Установить 

npm install -D type-fest
yarn add -D type-fest
pnpm add -D type-fest

использовать

Вот некоторые часто используемые три конфигурации

webpack-dev-server 

// package.json  "start": "webpack-dev-server --hot",
const path = require('path');
const ReactRefreshPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const isDevelopment = process.env.NODE_ENV !== 'production';

module.exports = {
  mode: isDevelopment ? 'development' : 'production',
  entry: {
    main: './src/index.js',
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        include: path.join(__dirname, 'src'),
        use: 'babel-loader',
      },
    ],
  },
  plugins: [
    isDevelopment && new ReactRefreshPlugin(),
    new HtmlWebpackPlugin({
      filename: './index.html',
      template: './public/index.html',
    }),
  ].filter(Boolean),
  resolve: {
    extensions: ['.js', '.jsx'],
  },
};

webpack-hot-middleware

webpack.dev.js

const devMode = process.env.NODE_ENV !== 'production';
// ...
    {
        test: /\.(jsx|js)$/,
        exclude: /node_modules/,
        use: [
            {
                loader: require.resolve('babel-loader'),
                options: {
                    plugins: devMode ? [require.resolve('react-refresh/babel')] : [],
                },
            },
        ],
    },

webpack.prod.js

const devMode = process.env.NODE_ENV !== 'production';
// ...
    plugins: [
        // ...,
        new webpack.HotModuleReplacementPlugin(),
        devMode && new ReactRefreshWebpackPlugin(),
    ],

ts 

module.exports = {
  mode: isDevelopment ? 'development' : 'production',
  entry: {
    main: './src/index.tsx',
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        include: path.join(__dirname, 'src'),
        use: [
          isDevelopment && {
            loader: 'babel-loader',
            options: { plugins: ['react-refresh/babel'] },
          },
          {
            loader: 'ts-loader',
            options: { transpileOnly: true },
          },
        ]
      },
    ],
  },
  plugins: [
    isDevelopment && new ReactRefreshPlugin(),
  ]
};

тестовое задание

По результатам видно, что он молниеносный. В настоящее время он используется без каких-либо серьезных проблем. Я надеюсь на поддержку 17 на следующем этапе. Ведь 17 — это гиперконвергентная версия, а старая проекты могут быть обновлены до 17 безболезненно.

В этой статье используетсяmdniceнабор текста

Категории