Browserify和ReactJs.Net服务器端渲染

Browserify and ReactJs.Net Server Side Rendering

本文关键字：服务器端 Net ReactJs Browserify      更新时间：2023-09-26

我一直在尝试使用ReactJS在MVC项目中运行Flux Todo List教程。网

我使用Gulp和Browserify来捆绑文件，然后调用以在我的视图中呈现React组件。gullfile.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>

查看此博客：

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

ReactJs就是一个很好的例子。Net、Gulp和Browserify:

https://github.com/Janekk/ReactDotNetBrowserify

希望有帮助：）

Browserify默认情况下不会公开绑定的对象，因此TodoApp对象不存在。您需要通过browserify-require公开/导出TodoApp，然后在浏览器中使用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));
});
相关文章：