用于开发的 react-router Web 服务器

Question

我刚刚开始使用 react-router，我想使用 browserHistory。到目前为止，我一直在开发使用带有 watchify 和 chrome 插件的热重载来监视我的静态内容的变化。这意味着我直接在静态内容上进行所有开发，并在不涉及 Web 服务器的情况下在浏览器中刷新该静态内容。

现在开始挑战 - 您不能在 file:// 上使用 browserHistory，因为源为 null 并且历史 api 会引发错误。此外，browserHistory 更好并被推荐，所以我想使用它。问题是它破坏了我的开发工作流程。如果每次我需要测试更改时都必须将静态内容部署到本地 tomcat 实例，这将非常慢。

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

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

Answer 1

您可以使用带有 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'));
});