node.js - 用于开发的 React-router Web 服务器

Question

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

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

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

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

Answer 1

您可以将 gulp 任务与 watchify 和 browsersync 结合使用来执行此操作。它可能是这样的:

注意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'));
});