Javascript Browserify和ReactJs.Net服务器端渲染

我一直在尝试使用ReactJS.Net在MVC项目中运行

我正在使用Gulp和Browserify绑定文件，然后在视图中调用React组件。gulpfile.js的相关部分：

gulp.task('build', function(){
  browserify({
    entries: [path.ENTRY_POINT],
    transform: [reactify]
  })
    .bundle()
    .pipe(source(path.NON_MINIFIED_OUT))
    .pipe(gulp.dest(path.DEST_BUILD));
});

public static void Configure()
{
    ReactSiteConfiguration.Configuration
        .AddScript("~/dist/build.js"); // Have also tried .AddScriptWithoutTransform
}

我已更改App.js文件以全局定义我的组件：

global.React = require('react');

global.TodoApp = require('./components/TodoApp.react');

我试图在我的视图中使用这样的：

<div id="app">
    @Html.React("TodoApp", new {})
</div>

<script src="http://fb.me/react-0.13.3.min.js"></script>
@Scripts.Render("~/bundles/reactApp")
@Html.ReactInitJavaScript()

但这似乎没有帮助

如果我只是在客户端渲染，效果很好：

<div id="app">
</div>

@Scripts.Render("~/bundles/reactApp")
<script>
    React.render(
        React.createElement(TodoApp, null),
        document.getElementById('app')
    );
</script>

@Scripts.Render（“~/bundles/reactApp”）
反应(
React.createElement（TodoApp，null），
document.getElementById（'app'）
);

默认情况下，Browserify不公开绑定的对象，因此TodoApp对象不存在。您需要通过browserify公开/导出TodoApp，然后在浏览器中使用它之前需要TodoApp

服务器还需要在全局空间中公开组件。我最终使用了类似于以下内容的东西：

gulp.task("bundle", function () {
    var exposure = new Readable();
    var b = browserify({
        transform: babelify
    });

    exposure.push('var React = require("react");\n');

    b.require(paths.components + "/Component1.jsx", { expose: 'Component1' });
    exposure.push('var Component1 = require("Component1");\n');

    b.require(paths.components + "/Component2.jsx", { expose: 'Component2' });
    exposure.push('var Component2 = require("Component2");\n');

    exposure.push(null);

    b.require("react");
    new StreamQueue()
        .queue(b.bundle()).queue(exposure)
        .pipe(source("bundle.js"))
        .pipe(gulp.dest(paths.componentJsDest));

});

查看此博客：

这是ReactJs.Net、Gulp和Browserify的一个很好的例子：

---

希望有帮助：）

你能发布你迄今为止所做工作的完整代码，让我看看吗？@DanielLoNigro我已经将完整的源代码添加到GitHub repo中：@RagtimeWilly很想看看你是否能够启动并运行它？我正在尝试用.net实现flux并做出反应@nanonerd我在ASP.NETMVC站点中使用flux模式作为视图创建并运行了一个站点。不过，我仍然没有设法使服务器端渲染工作正常。在我上面的评论中，有一个指向github项目的链接，显示了基本思想。如果您有任何问题，请告诉我。@nanonerd您可以使用react aspnet样板文件使用flux/redux获得服务器端渲染。