react-hot-export-loader
A Webpack loader that automatically inserts react-hot-loader code, Inspired by [react-hot-loader-loader](https://github.com/NoamELB/react-hot-loader-loader)
Last updated 9 months ago by ahonn .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install react-hot-export-loader 
SYNC missed versions from official npm registry.

react-hot-export-loader

A Webpack loader that automatically inserts react-hot-loader code, Inspired by react-hot-loader-loader

Skip resources that are not exported to React components, do nothing when process.env.NODE_ENV

Install

npm install react-hot-loader --save-dev
npm install react-hot-export-loader --save-dev

Getting started

  1. Add react-hot-loader/babel to your .babelrc
// .babelrc
{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["react-hot-loader/babel"]
}
  1. Add react-hot-export-loader to your webpack configuration (must be before babel-loader)
// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: [
          'babel-loader',
          'react-hot-export-loader', // <== add this line
        ],
      },
    ],
  },
};

Options

identifier

By default react-hot-loader / root exports the hot function as __HOT__, you can set the identifier option to modify the export name.

react-hot-export-loader will automatically inserts react-hot-loader code to the React component code like that:

// before inserts
import React from 'react';

const App = () => {
  return (
    <h1>Hello World</h1>
  );
};

export default App

// after inserts
import 'react-hot-loader';
import { hot as __HOT__ } from 'react-hot-loader/root';
import React from 'react';

const App = () => {
  return (
    <h1>Hello World</h1>
  );
};

export default __HOT__(App);

plugins

Array containing the babel plugins that you want to enable.

use classProperties babel plugin

  • add @babel/plugin-proposal-class-properties to your
// /babelrc
{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["react-hot-loader/babel", "@babel/plugin-proposal-class-properties"]
}
  • add classProperties to react-hot-export-loader plugins options
// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: [
          'babel-loader',
          {
            loader: 'react-hot-export-loader',
            options: {
              plugins: ['classProperties'],
            },
          }
        ],
      },
    ],
  },
};

filter

The function of filtering the resources you want to automatically add code

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: [
          'babel-loader',
          {
            loader: 'react-hot-export-loader',
            options: {
              filter: (ctx) => {
                const { resourcePath } = ctx;
                return resourcePath === '/path/to/any/what/you/want';
              };
            },
          }
        ],
      },
    ],
  },
};

Licence

MIT

Current Tags

  • 1.3.1                                ...           latest (9 months ago)

5 Versions

  • 1.3.1                                ...           9 months ago
  • 1.3.0                                ...           9 months ago
  • 1.2.0                                ...           9 months ago
  • 1.1.0                                ...           9 months ago
  • 1.0.0                                ...           9 months ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 1
Dependencies (5)
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |