Browserify和ReactJs.Net服務器端渲染

Question

我一直在嘗試使用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');

我試圖在我看來這樣使用：

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

Answer 1

看看這個博客：

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

這里是ReactJs.Net，Gulp和Browserify的一個很好的例子：

https://github.com/Janekk/ReactDotNetBrowserify

希望能幫助到你 ：）

Answer 2

默認情況下，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));

});