ReactJs.NET - 带有服务器端组件呈现的ScriptBundling

时间:2016-03-17 14:50:23

标签: asp.net-mvc reactjs

我刚刚接受了教程here,这很棒,但最后两节讨论了Bundling&分别缩小和服务器端渲染。不幸的是,它似乎没有描述如何使这两个游戏很好地发挥作用,例如将脚本包传递给服务器端渲染功能。

这是我到目前为止所拥有的:

BundleConfig.RegisterBundles我有以下内容:

bundles.Add(New BabelBundle("~/bundles/main").Include(
                        "~/Scripts/showdown.js", 
                        "~/Scripts/Tutorial.jsx"))

BundleTable.EnableOptimizations = True

我可以在视图中轻松地渲染该捆绑包,因此如果该捆绑包最终包含大量文件,我只需更新BundleConfig中的列表。

@Scripts.Render("~/bundles/main")

但在ReactConfig.Configure我似乎无法使用该捆绑包,我必须重复传递给BundleConfig的脚本列表:

//This doesn't work and throws the following error:
//Could not find a part of the path '\\pathToMyProject\bundles\main'
ReactSiteConfiguration.Configuration
.AddScript("~/bundles/main")

//This does, but it's basically a repeat of BundleConfig
ReactSiteConfiguration.Configuration
.AddScript("~/Scripts/showdown.js")
.AddScript("~/Scripts/Tutorial.jsx") 

是否有一种很简单的方法可以让它使用相同的包来呈现正在加载的视图?

1 个答案:

答案 0 :(得分:0)

你可能现在已经有了解决方案,FWIW,这是你可以尝试的,你可能已经执行的前两个步骤,第三个就是你所追求的......

  1. 在ReactConfig.cs
  2. 的顶部注释掉[assembly: WebActivatorEx.PreApplicationStartMethod(typeof(YourApp), "Configure")]
  3. Application_Start()RegisterBundles()之后,您现在可以将呼叫插入ReactConfig.Configure();这样可以确保您的捆绑包在尝试对其进行任何操作之前已实际注册。
  4. 最后在Re​​actConfig.cs中,添加此行

    var myBabelBundlePath = BundleTable.Bundles.ResolveBundleUrl("~/myBabelBundleName"); 
    ReactSiteConfiguration.Configuration.AddScript(myBabelBundlePath);