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

Question

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

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

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

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

处理的

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 以用于生产，因为它似乎在文件大小和效率方面提供了更好的 returns。

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

Answer 2

Nollup怎么样？

来自CLI docs：

You're probably already using rollup -c in your package.json scripts section. Nollup functions the same way, you can use nollup -c to start a web server that reads your rollup.config.js file.

"scripts": {
    "start": "nollup -c"
}

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

React hot module replacement alternative - Rollup, Gulp and Browsersync

javascript

reactjs

gulp

browser-sync

rollup