React hot module replacement alternative - Rollup, Gulp and Browsersync

Question

I am building a React app which has several stages of user interaction to navigate. Working on a stage which is later in the process requires a lot of interaction to get back to the same point when the page is reloaded for changes to the JS.

Webpack supports HMR which only replaces the modified React component, meaning the entire app doesn't have to be reloaded for each change, seemingly Rollup doesn't support this behaviour.

---

What are the alternatives for Rollup to make the process of developing React apps quicker? I can't go through the entire process of manually entering input data each time to reach the same point in the user journey.

---

I am currently using Rollup to bundle ES6 style imports, pass them to Babel the output of which is served using Browsersync. This is all handled through Gulp.

Gulp config:

const babelConfig = {
    exclude: 'node_modules/**',
    "presets": [['es2015', { modules: false }], 'react'],
    "plugins": ["external-helpers", "transform-remove-strict-mode", "transform-object-rest-spread"],
    babelrc: false
};

const rollupJS = (inputFile, options) => {
    let notifier = require('node-notifier');

    return () => {
        return plugins.rollupStream({
            entry: options.basePath + inputFile,
            format: options.format,
            sourceMap: options.sourceMap,
            plugins: [
                plugins.rollupPluginBabel(babelConfig),
                plugins.rollupPluginReplace({ 'process.env.NODE_ENV': JSON.stringify('dev') }), //production
                plugins.rollupPluginCommonjs({
                    namedExports: {
                        'node_modules/react/index.js': ['Children', 'Component', 'PropTypes', 'createElement'],
                        'node_modules/react-dom/index.js': ['findDOMNode']
                    }
                }),
                plugins.rollupPluginNodeResolve({ jsnext: true, main: true })
            ]
        })
            .pipe(plugins.vinylSourceStream(inputFile, options.basePath))
            .pipe(plugins.vinylBuffer())
            .pipe(plugins.sourcemaps.init({ loadMaps: true }))
            .pipe(plugins.sourcemaps.write('.'))
            .pipe(gulp.dest(paths.tmp + '/script/'))
            .pipe(plugins.browserSync.stream());
    };
}

gulp.task('js', rollupJS('app.js', {
    basePath: paths.dev + '/script/',
    sourceMap: true,
    format: 'iife'
}));

Answer 1

The only current solution to this problem is to switch over and use Webpack for at least the development side of things so that I could use HMR.

I kept my instance of Rollup to compile the JS for production as it seems to give better returns on filesize and efficiency.

There is currently no foreseeable alternative for HMR in Rollup. This is the only solution.