Question

我正在构建一个React应用程序，它有几个用户交互阶段可以导航。在稍后的过程中处理一个阶段需要进行大量的交互，以便在重新加载页面以更改JS时返回到同一点。

Webpack支持HMR，它只替换修改后的React组件，这意味着整个应用程序不必为每次更改重新加载，看起来Rollup不支持这种行为。

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

我目前正在使用Rollup捆绑ES6样式导入，将它们传递给Babel，其输出使用Browsersync提供。这一切都是通过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

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

我保留了Rollup的实例来编译JS用于生产，因为它似乎可以提高文件大小和效率。

遗憾的是，Rollup目前没有可预见的HMR替代方案，这是唯一的解决方案。

Answer 2

Nollup怎么样？

来自CLI docs：

您可能已经在rollup -c package.json部分中使用了scripts。 Nollup的功能相同，您可以使用nollup -c来启动读取rollup.config.js文件的Web服务器。

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

反应热模块替换替代 - Rollup，Gulp和Browsersync

2 个答案: