Node.js react路由器web服务器用于开发

我刚刚开始使用react路由器，我想使用browserHistory。到目前为止，我一直在开发使用watchify和chrome插件的热重新加载来监控静态内容的变化。这意味着我直接在静态内容上进行所有开发，并在浏览器中刷新静态内容，而不涉及web服务器

现在开始挑战-您不能在文件：//上使用browserHistory，因为源代码为null，历史api抛出错误。此外，browserHistory更好，建议使用，所以我想使用它。问题是它破坏了我的开发工作流程。如果每次我需要测试一个更改时都必须将静态内容部署到本地tomcat实例中，那么速度会非常慢

我认为NPM社区一定已经有了解决方案，我只是不知道该搜索什么工具。我认为一定有一些NPM插件可以监视我的SPA内容的变化，构建它，然后将它部署到Web服务器。我做了一些搜索这样的工具，但我还没有找到我需要到目前为止

---

有人能帮忙吗？我想也许我只是需要Grunt自动推到我的本地tomcat。。。无论解决方案是什么，我都需要一个快速开发工作流程。：）

您可以使用watchify和browsersync的gulp任务来完成此任务。下面是它的外观：

请注意historyApiFallback（），它允许使用browserHistory

var gulp = require('gulp');
var buffer = require('vinyl-buffer');
var sourcemaps = require('gulp-sourcemaps');
var source = require('vinyl-source-stream');
var browserSync = require('browser-sync');
var watchify = require('watchify');
var historyApiFallback = require('connect-history-api-fallback');
var htmltidy = require('gulp-htmltidy');
var filesize = require('gulp-filesize');
var concatCss = require('gulp-concat-css');
var minifyCss = require('gulp-minify-css');
var csslint = require('gulp-csslint');
var assign = require('lodash.assign');

var customOpts = {
  entries: ['./src/js/app.js'],
  transform: [
    [
      'babelify',
      {
        'plugins': ['transform-decorators-legacy'],
        'presets': ['es2015', 'react', 'stage-0']
      }
    ],
    'brfs'
  ],
  debug: true,
  cache: {},
  packageCache: {},
  fullPaths: true
};

var opts = assign({}, watchify.args, customOpts);
var bundler = browserify(opts);

function bundle() {
  return bundler
      .bundle()
      .pipe(source('app.js'))
      .pipe(buffer())
      .pipe(filesize())
      .pipe(sourcemaps.init({loadMaps: true}))
      .pipe(filesize())
      .pipe(sourcemaps.write('./'))
      .pipe(gulp.dest('./dist/js'));
}
gulp.task('serve', ['js', 'css'], function() {
  var watch = watchify(bundler);
  // Without the line, update events won't be fired
  watch.bundle().on('data', function() {});

  browserSync({
    server: {
      baseDir: 'dist',
      middleware: [historyApiFallback()]
    },
    port: 8000,
    ui: {
      port: 8001
    }
  });

  gulp.watch(['*.html'], {cwd: 'src'}, ['html', browserSync.reload]);
  gulp.watch(['css/**/*.css'], {cwd: 'src'}, ['css', browserSync.reload]);
  bundler.on('update', bundle); // on any dep update, runs the bundler
  gulp.watch(['js/**/*.js'], {cwd: 'dist'}, browserSync.reload);
});

gulp.task('js', bundle);

gulp.task('css', function () {
  return gulp.src('css/**/*.css', {cwd: 'src'})
    .pipe(csslint({
      'compatible-vendor-prefixes': false,
      'box-sizing': false
    }))
    .pipe(concatCss('app.css'))
    .pipe(minifyCss())
    .pipe(gulp.dest('./dist/css'));
});

gulp.task('html', function () {
  return gulp.src('**/*.html', {cwd: 'src'})
    .pipe(htmltidy())
    .pipe(gulp.dest('./dist'));
});

---

格伦特当然可以用在这里。我建议您查看webpack，因为它是目前最受欢迎的捆绑包之一。我有一个类似的项目设置，其中webpack（通过NPM启动）监视源文件中的更改，并将包导出到所选目录。Webpack也有自己的开发服务器，但它是可选的。是的，我不确定我应该学习哪一个，Webpack还是grunt。大量的框架和工具需要学习，这需要时间。是什么让你选择了webpack？只是受欢迎程度？受欢迎程度并没有影响。但让我走得最快的是丹·阿布拉莫夫（Dan Abramov）的热重新加载工具，它（至少是第一个版本）依赖于webpack。但肯定有很多工具，甚至更多关于如何将它们结合在一起的观点。这些天来，我不太需要狼吞虎咽或咕哝——只需要npm脚本和webpack。从@Yair开始，自从我开始使用webpack以来，我不再觉得任务执行者有什么用处了。大多数事情都可以通过网页包插件/加载程序完成，任何不能完成的事情，我只是倾向于在我的包中制作一个NPM脚本。json.Cool，我实际上一直想保持纯粹的NPM，但不确定这是否会很难做到。你们有没有关于没有grunt的热重新加载工具集的好参考资料？这个历史api回退功能是什么？它是一个中间件，允许服务于一个页面的应用程序。默认情况下，brosersync将尝试加载与输入的URL相对应的HTML页面，这显然不适用于单页应用程序。中间件允许browsersync使用browserhistory加载单页应用程序的URL。我正在尝试了解它是如何工作的，因为它看起来很棒。你说“尝试加载与输入的url对应的html页面”，但我不太明白你的意思。我想这可能是我现在知道的最好的解决方案，所以我会尽快尝试。还有一件事——真的需要大口喝吗？看来我可以用纯npm和browsersync来实现这一点，不是吗？当然，我不知道如何翻译它来删除gulpYes，它还带有一个管理UI，以及浏览器/设备之间的同步（如果您在不同的浏览器/设备上启动browsersync提供的相同页面，您的操作将发送到所有浏览器/设备）