Question

我用Google搜索了很多，我还没想出怎么做。我有一个我想在azure上部署的Web应用程序。我生成链接但使用我的React组件的路由返回500状态代码。

对于我的组件我正在使用JSX，我将它们放在/ js下的wwwroot文件夹中（我不使用ES16）。

我需要一些东西来捆绑它并将jsx处理成js吗？我不明白为什么它适用于localhost。

在Startup.cs上，配置方法，我添加了这样的脚本：

app.UseReact(config =>
        {

            config
              .AddScript("~/js/test.jsx")
              .AddScript("~/js/users.jsx")
              .AddScript("~/js/userCards.jsx")
              .AddScript("~/js/userInfo.jsx")
              .AddScript("~/js/cards.jsx")
              .AddScript("~/js/user.jsx")
              .AddScript("~/js/addCard.jsx")
              .AddScript("~/js/cardImages.jsx")

              .SetJsonSerializerSettings(new JsonSerializerSettings
              {
                  StringEscapeHandling = StringEscapeHandling.EscapeHtml,
                  ContractResolver = new CamelCasePropertyNamesContractResolver()
              });

        });

如果这是一个愚蠢的问题，我很抱歉，但我似乎找不到对asp.net核心的好解释。

[编辑]我正在使用VS2017，asp.net核心1.0.4和React.AspNet 3.0.1

错误记录：

ReactEngineNotFoundException: No usable JavaScript engine was found. Please 
install a JavaScript engine such as React.JavaScriptEngine.ClearScriptV8 (on 
 Windows) or React.JavaScriptEngine.VroomJs (on Linux and Mac OS X). Refer 
  to the ReactJS.NET documentation for more details.
   React.AspNet.HtmlHelperExtensions.get_Environment()

   TinyIoCResolutionException: Unable to resolve type: 
  React.JavaScriptEngineFactory
  React.AspNet.HtmlHelperExtensions.get_Environment()

  TinyIoCResolutionException: Unable to resolve type: React.ReactEnvironment
  React.AspNet.HtmlHelperExtensions.get_Environment()

   ReactNotInitialisedException: ReactJS.NET has not been initialised 
   correctly. Please ensure you have called app.AddReact() and 
   app.UseReact() in your Startup.cs file.
    React.AspNet.HtmlHelperExtensions.get_Environment()

它说我没有app.AddReact也没有app.UseReact，但我有两个......

 public void ConfigureServices(IServiceCollection services)
    {
        services.AddSingleton<IHttpContextAccessor, HttpContextAccessor>();
        services.AddReact();

        services.AddServerSentEvents();
        services.AddServerSentEvents<INotificationsServerSentEventsService, NotificationsServerSentEventsService>();

        services.AddMvc();            

        services.AddSingleton<HttpClient>();
    }

    public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory, IServiceProvider serviceProvider)
    {
        loggerFactory.AddConsole(Configuration.GetSection("Logging"));
        loggerFactory.AddDebug();

        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
            app.UseBrowserLink();
        }
        else
        {
            app.UseDeveloperExceptionPage();
            app.UseBrowserLink();
        }


        app.MapServerSentEvents("/see-heartbeat");
        app.MapServerSentEvents("/sse-notifications", serviceProvider.GetService<NotificationsServerSentEventsService>());

        app.UseStatusCodePagesWithReExecute("/Error/{0}");

        app.UseReact(config =>
        {

            config
              .AddScript("~/js/test.jsx")
              .AddScript("~/js/users.jsx")
              .AddScript("~/js/userCards.jsx")
              .AddScript("~/js/userInfo.jsx")
              .AddScript("~/js/cards.jsx")
              .AddScript("~/js/user.jsx")
              .AddScript("~/js/addCard.jsx")
              .AddScript("~/js/cardImages.jsx")

              .SetJsonSerializerSettings(new JsonSerializerSettings
              {
                  StringEscapeHandling = StringEscapeHandling.EscapeHtml,
                  ContractResolver = new CamelCasePropertyNamesContractResolver()
              });

        });

        app.UseDefaultFiles();
        app.UseStaticFiles();


        app.UseMvc(routes =>
        {
            routes.MapRoute(
                name: "default",
                template: "{controller=Index}/{action=Index}/{id?}");
        });


    }

Answer 1

那是因为你的PC上有JavaScript引擎，而不是Azure。取自：https://github.com/reactjs/React.NET/issues/400（实际上是关于如何使React工作的完整说明）

当使用这些指南的组合发布到Azure时，我能够使应用程序正常工作：

http://www.samulihaverinen.com/web-development/dotnet/2016/01/19/how-to-run-clearscript-v8-javascript-engine-in-azure/

https://github.com/Taritsyn/JavaScriptEngineSwitcher/wiki/Registration-of-JS-engines

从第一个指南开始，我分别安装了依赖项：

Uninstall-Package React.AspNet
Install-Package JavaScriptEngineSwitcher.Core
Install-Package JavaScriptEngineSwitcher.Msie (May not be needed)
Install-Package JSPool
Install-Package JavaScriptEngineSwitcher.ChakraCore
Install-Package JavaScriptEngineSwitcher.ChakraCore.Native.win-x64 (Selected native implementation)
Install-Package Microsoft.ChakraCore (I think this is key to enabling ChakraCore on the server)
Install-Package React.AspNet -IgnoreDependencies

在第二篇指南中，我安装了一个软件包以在.NET Core 1.X中启用JavaScriptEngineSwitcher配置：

Install-Package JavaScriptEngineSwitcher.Extensions.MsDependencyInjection

在Startup.cs

中

ConfigureServices():
services.AddJsEngineSwitcher(options => options.DefaultEngineName = ChakraCoreJsEngine.EngineName).AddChakraCore();

Answer 2

最有可能的是，您的服务器上未安装Internet Explorer 9+（或Microsoft Edge），并且您没有为JavaScriptEngineSwitcher.V8和JavaScriptEngineSwitcher.ChakraCore模块安装本机程序集。

另外，我建议您阅读“Misconceptions about the JavaScript Engine Switcher version 2.X”讨论。

发布到azure，asp.net核心React app

2 个答案: