反应路由器Web服务器的开发
我刚开始使用react-router，我想使用browserHistory。 到目前为止，我一直在使用watchify和一个chrome插件使用热重载进行开发，以监视静态内容的变化。 这意味着我正在直接在静态内容上进行所有的开发，并在浏览器中刷新静态内容，而不涉及Web服务器。
现在开始挑战 – 你不能在文件上使用browserHistory：//因为原点是null，并且历史api会抛出一个错误。 此外，browserHistory更好，build议所以我想使用它。 麻烦的是它打破了我的开发工作stream程。 如果每次我需要testing一个更改，我都要将我的静态内容部署到本地的tomcat实例，这将会非常缓慢。
我认为NPM社区必须已经有了一个解决scheme，我只是不知道要search什么工具。 我认为必须有一些NPM插件监视我的SPA内容的变化，build立它，然后将它部署到networking服务器。 我做了一些这样的工具search，但我还没有find我需要的东西。
任何人都可以协助 我想也许我只需要Grunt自动推送到我本地的Tomcat …无论什么解决scheme，我需要一个快速开发工作stream程。 🙂
您可以使用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')); });