Browserify 和 ReactJs.Net 服务器端渲染答案

【问题标题】：Browserify and ReactJs.Net Server Side RenderingBrowserify 和 ReactJs.Net 服务器端渲染
【发布时间】：2015-09-16 20:14:57
【问题描述】：

我一直在尝试使用 ReactJS.Net 在 MVC 项目中运行 Flux Todo List Tutorial。

我正在使用 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));
});

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

global.React = require('react');

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

我试图在我的 view 中像这样使用：

<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()

但它在运行时会抛出以下错误：

找不到名为“TodoApp”的组件。你忘了把它添加到 App_Start\ReactConfig.cs 吗？

我已将 Browserify 的输出添加到我的 ReactConfig.cs：

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

但这似乎没有帮助。

如果我只在客户端渲染它就可以了：

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

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

【问题讨论】：

你能把你到目前为止所做的完整代码贴出来让我看看吗？
@DanielLoNigro 我已将完整的源代码添加到 GitHub 存储库：github.com/RagtimeWilly/FluxMvcExample
@RagtimeWilly 想看看您是否能够启动并运行它？我正在尝试用 .net 实现通量并做出反应。 stackoverflow.com/questions/31599992/…
@nanonerd 我有一个站点启动并运行，它使用通量模式作为 ASP.Net MVC 站点中的视图。我仍然没有设法让服务器端渲染工作。有一个 github 项目的链接，显示了我上面评论中的基本思想。如果您有任何问题，请告诉我。
@nanonerd 您可以使用 react-aspnet-boilerplate 通过flux/redux 获取服务器端渲染。 github.com/pauldotknopf/react-aspnet-boilerplate

标签： javascript c# asp.net-mvc browserify reactjs.net

【解决方案1】：

查看此博客：

http://janekk.github.io/tech/2014/07/25/aspnet-mvc-reactjs-browserify.html

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

https://github.com/Janekk/ReactDotNetBrowserify

希望对你有帮助:)

【讨论】：

【解决方案2】：

默认情况下，Browserify 不会公开您的捆绑对象，因此 TodoApp 对象不存在。您需要通过 browserify require 公开/导出 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));

});

【讨论】：