reactjs - 我可以将 Flux 架构应用于 ReactJS.net 吗？

Question

如何使用reactjs.net在asp.net中创建flux架构？

我会有几个文件。 Jsx，我该如何设法让服务器全部归还？

在此示例中 => Link ，它使用 asp.net 创建但不使用服务器渲染

Answer 1

我目前正在开发一个功能，作为我们的 .net 应用程序中的 ReactJS + Flux 的测试平台。这是它的设置方式。

1. 我们使用nodejs作为包管理器。我们使用NodeJs Visual Studio Tools在VS中获取nodejs交互窗口并能够创建NodeJs项目。 http://nodejstools.codeplex.com/
2. Gulp 任务调用 browserify 来搜索根 jsx 并找到所有依赖项。 Gulp还调用reactify库来转换jsx文件。连接的 .js 文件放在我们的 mvc 网站的目录中。
3. Gulp 任务还将所有相关的 js 文件复制到 mvc.net 项目。
4. 在开发时，我们使用 Visual Studio Task Runner 扩展来运行 Gulp 任务来监视更改，这样我们就不必在开发时“继续构建”。它使用“watchify”库。
5. 我们使用 Jest 进行测试 - 尽管我们遇到了 NodeJs 的问题，而且 jest 在最新版本的 NodeJs 中运行良好，因此我们不得不将版本降低到 0.10.36。
6. 在构建解决方案之前，我们使用 TeamCity 运行 Gulp 任务(有一个测试设置，但尚未将其添加到我的新功能中)。

Gulp 发挥了大部分作用。这是我们的 Gulp 文件的副本(很乱，但我仍在学习)。许多任务都是观看 css js 和 jsx 文件，但我希望这会有所帮助。

var gulp = require('gulp');
var source = require('vinyl-source-stream');
var browserify = require('browserify');
var watchify = require('watchify');
var reactify = require('reactify');
var concat = require('gulp-concat');
var buffer = require('vinyl-buffer');
var uglify = require('gulp-uglify');

var createbundler = function () {

    var bundler = browserify({
        entries: ['./app/js/VaeApp.jsx'], // Only need the root js file, browserify finds the dependencies
        transform: [reactify], // We want to convert JSX to normal javascript
        debug: false, // include sourcemapping for minified scripts?
        cache: {}, packageCache: {}, fullPaths: true // Requirement of watchify
    });
    return bundler;
}
gulp.task('js', function () {

    var bundler = createbundler();

    bundler.bundle()
        .pipe(source('bundle.js'))
        .pipe(buffer())// <----- convert from streaming to buffered vinyl file object
        .pipe(uglify())
        // Create the initial bundle when starting the task
        .pipe(gulp.dest('../Mvc.Web/Scripts/Flux/js'));
});

gulp.task('js-shim-sham', function () {
    gulp.src('./node_modules/es5-shim/es5-*.min.js')
            .pipe(gulp.dest('../Mvc.Web/Scripts/Flux/js'));
    console.log("updated shim-sham");
});
gulp.task('js-dev', function () {

    var watcher = watchify(createbundler());

    return watcher
    .on('update', function () { // When any files update
        var updateStart = Date.now();
        console.log('Updating!');
        watcher.bundle().pipe(source('bundle.js'))
        .pipe(buffer())// <----- convert from streaming to buffered vinyl file object
        .pipe(gulp.dest('../Mvc.Web/Scripts/Flux/js'));
        console.log('Updated!', (Date.now() - updateStart) + 'ms');
    })
    .bundle()
    .pipe(source('bundle.js'))
    .pipe(buffer())// <----- convert from streaming to buffered vinyl file object
   // .pipe(uglify())
    // Create the initial bundle when starting the task
    .pipe(gulp.dest('../Mvc.Web/Scripts/Flux/js'));
});

var runcss = function () {
    var updateStart = Date.now();
    gulp.src('./app/css/document/*.css')
            .pipe(concat('main.css'))
            .pipe(gulp.dest('../Mvc.Web/Scripts/Flux/css'));

    console.log('Updated!', (Date.now() - updateStart) + 'ms');
};

var runimages = function () {
    var updateStart = Date.now();
    gulp.src('./app/img/*.*')
            .pipe(gulp.dest('../Mvc.Web/Scripts/Flux/img'));
    console.log('Updated!', (Date.now() - updateStart) + 'ms');
};
gulp.task('styles', function () {

    runcss();
    runimages();

});
gulp.task('styles-dev', function () {
    runcss();

    gulp.watch('./app/css/document/*.css', runcss);

    runimages();
    gulp.watch('./app/img/*.*', runimages);

});

// Just running the two tasks
gulp.task('build-dev', ['js-dev', 'styles-dev', 'js-shim-sham']);

// Just running the two tasks
gulp.task('build', ['js', 'styles', 'js-shim']);