Горячий модуль-загрузчик применяет холодный к пакету node_module

Question

Я пытаюсь выяснить, как я могу применить cold() только к одному пакету узла.

в соответствии с документами мне нужно использовать setConfig, а также применить другой загрузчик babel, чтобы включить только node_modules. Однако я не могу на всю жизнь понять, где и как это реализовать.

import { setConfig, cold } from 'react-hot-loader'
setConfig({
  onComponentRegister: (type, name, file) =>
    file.indexOf('node_modules') > 0 && cold(type),
})

Я использую Kendo UI React, который не поддерживает HMR. Поэтому мне нужно обернуть PanelBarItem таким образом, чтобы реагирующий горячий загрузчик не оборачивал компонент. То, что я хотел бы сделать, это применить это правило ко всем моим пакетам кендо, чтобы мне не приходилось явно вызывать cold для каждого компонента при его использовании.

import React from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';
import messages from './messages';
import { Button } from '@progress/kendo-react-buttons';
import { PanelBar, PanelBarItem } from '@progress/kendo-react-layout';
import { changeLocale } from '../LanguageProvider/actions';
import { cold } from 'react-hot-loader';

class Home extends React.Component {
   render() {
      cold(PanelBarItem);
      return (
         <div>
            <PanelBar title="Test">
               <PanelBarItem title={'Sales Forecasts'}>
                  <PanelBarItem title={'Q1 sdfds'} />
                  <PanelBarItem title={'Q2 Forecast'} />
                  <PanelBarItem title={'Q3 Forecast'} />
                  <PanelBarItem title={'Q4 Forecast'} />
               </PanelBarItem>
            </PanelBar>
         </div>
      );
   }
}

Answer 1

Когда вы настраиваете свой веб-пакет, у вас, вероятно, есть что-то вроде этого:

{
    module: {
      rules: [{
        // testing for js/jsx files, and using babel-loader load them int webpack
        test: /\.jsx?$/,
        
        // Maybe looking only on your source folder
        // (and looking aside from the node_modules as a consequence)
        include: [
          path.resolve(__dirname, '../src'),
        ],
        
        use: [{
          loader: 'babel-loader', // Ask babel to eat up those files and prep them for webpack
          options: {
            presets: [
              // What ever babel presets you might use
            ],
            plugins: [
              // Some babel plugins you might use, like transform-runtime, or lodash
              
              // This plugin is RHL's dude that goes over your code and marks
              // things for patching later by the client
              'react-hot-loader/babel',
            ]
          },
      }, {
        // some other loaders for styles, images etc.
      },]
    }

    // More webpack stuff
  }

Обычно вы не будете применять загрузчик "js/jsx" к node_modules (как показано выше), и именно поэтому плагин babel, который RHL использует для исправления, никогда не получает возможности обработать код Kendo.

В документации содержится указание сделать это, чтобы добавить еще один загрузчик, который ищет файлы js / jsx, но применяет только плагин babel RHL. как это:

{
  module: {
    rules: [{
      // Your usual loaders including the usual babel-loader for your code
    }, {
      test: /\.jsx?$/,
      include: [
        // Focus on the folder of the module you want to "cold" later
        // or go for all node_modules if you need to
        path.resolve(__dirname, '../node_modules/<YOUR MODULE>'),
      ],
      use: [{
        loader: 'babel-loader',
        options: {
          plugins: [
            // The only plugin
            'react-hot-loader/babel',
          ]
        },
    }]
  }
}

Затем, когда вы настраиваете RHL на клиенте (первое, что вы делаете), вызывая setConfig вы также получите файлы из помеченных модулей, чтобы применить cold на.

В вашем самом первом файле, как показано в документации, требуется rhlconfig.js файл. onComponentRegister теперь также должны видеть файлы из node_modules,