開發人員的React-Router Web服務器

Question

我剛剛開始使用react-router，並且我想使用browserHistory。 到目前為止，我一直在使用將熱重加載與watchify和chrome插件一起使用來監視我的靜態內容的變化。 這意味着我將直接在靜態內容上進行所有開發，並在不涉及Web服務器的情況下在瀏覽器中刷新靜態內容。

現在開始挑戰-您不能在file：//上使用browserHistory，因為原點為null，並且歷史api會引發錯誤。 另外，最好還是建議使用browserHistory，所以我想使用它。 問題是它破壞了我的開發工作流程。 如果每次我需要測試更改時都必須將靜態內容部署到本地tomcat實例，它將非常慢。

我認為NPM社區必須已經有解決方案，而我只是不知道要搜索什么工具。 我認為必須有一些NPM插件來監視我的SPA內容中的更改，進行構建，然后將其部署到Web服務器。 我對這種工具做了一些搜索，但到目前為止我還沒有找到所需的工具。

有人可以協助嗎？ 我想也許我只需要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'));
});