ReactJs.NET - 具有服务器端组件渲染的 ScriptBundling

IT技术 asp.net-mvc reactjs
2021-05-21 03:09:35

我刚刚遵循了这里的教程,这很棒,但最后两节分别讨论了捆绑和缩小以及服务器端渲染。不幸的是,它似乎没有描述如何使这两者很好地发挥作用,例如将脚本包传递给服务器端渲染函数。

这是我到目前为止:

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个回答

您现在可能已经有了解决方案,FWIW,这是您可以尝试的方法,您可能已经执行了前 2 个步骤,第 3 个步骤是您所追求的……

  1. 注释掉[assembly: WebActivatorEx.PreApplicationStartMethod(typeof(YourApp), "Configure")]在ReactConfig.cs顶部
  2. 在你的Application_Start(), afterRegisterBundles()你现在可以插入调用ReactConfig.Configure();This 确保你的包在尝试对它们做任何事情之前已经实际注册。
  3. 最后在 ReactConfig.cs 中,添加这一行

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