7

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

我会有几个文件。Jsx，我将如何设法成为服务器的所有成员？

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

4

2 回答 2

6

我目前正在开发一个功能，作为我们 .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']);
于 2015-03-19T04:28:14.417 回答
4

查看react-dot-not。

它使用带有 ASP.MVC 的 webpack/gulp。它支持 redux/flux，支持使用 react-router 进行客户端路由，随时可以使用 F5 从服务器重新渲染相同的页面。

于 2016-03-07T04:47:42.357 回答