用于开发的反应路由器网络服务器

Question

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

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

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

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

Answer 1

您可以将 gulp 任务与 watchify 和 browsersync 一起使用。它可能是这样的：

注意允许使用 browserHistory 的 historyApiFallback()。

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

用于开发的反应路由器网络服务器

react-router web server for dev

node.js

npm

reactjs

react-router