Question

我试图弄清楚如何将cold（）应用于单个节点程序包。

根据文档，我需要使用setConfig并还要应用另一个babel-loader以仅包含node_modules。但是我一生都无法弄清楚在何处或如何实施。

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

我正在使用不支持HMR的Kendo UI React。所以我需要包装PanelBarItem，以便react-hot-loader不包装组件。我想做的就是在我的所有kendo软件包中都应用此规则，这样我在使用每个组件时就不必显式调用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

在配置Webpack时，您可能会遇到以下情况：

{
    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（如上所示），这就是为什么RHL用来修补问题的babel插件永远无法处理Kendo代码的原因

文档中要求您执行的操作以添加另一个用于查找js / jsx文件但仅应用RHL babel插件的加载器。像这样：

{
  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',
          ]
        },
    }]
  }
}

然后，当通过调用setConfig在客户端上配置RHL（要做的第一件事）时，您还将从现在标记的模块中获取文件，以对其应用cold。

就像文档中显示的一样，在您的第一个文件中，需要rhlconfig.js文件。 onComponentRegister现在也应该看到来自node_modules的文件。

hot-module-loader将冷应用于node_module软件包

1 个答案: