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

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

找不到名为＆＃39; TodoApp＆＃39;的组件。您是否忘记将其添加到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 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));

});

Browserify和ReactJs.Net服务器端渲染

2 个答案: