React 热模块替换替代方案 - Rollup、Gulp 和 Browsersync

Question

我正在构建一个 React 应用程序，它有几个用户交互阶段需要导航。在流程后期的阶段工作需要大量交互才能在重新加载页面以更改 JS 时返回到同一点。

Webpack 支持 HMR，它仅替换修改后的 React 组件，这意味着每次更改都不必重新加载整个应用程序，似乎 Rollup 不支持此行为。

---

Rollup 有哪些替代方案可以加快 React 应用程序的开发过程？我无法每次都手动输入输入数据以达到用户旅程中的同一点的整个过程。

---

我目前正在使用 Rollup 来捆绑 ES6 样式导入，将它们传递给 Babel，其输出是使用 Browsersync 提供的。这一切都是通过 Gulp 处理的。

吞咽配置：

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

当前解决此问题的唯一方法是至少在开发方面切换并使用 Webpack，以便我可以使用 HMR。

我保留了 Rollup 实例来编译 JS 以进行生产，因为它似乎可以在文件大小和效率方面提供更好的回报。

目前 Rollup 中没有可预见的 HMR 替代方案。这是唯一的解决办法。