.NET Core 2.X MVC，React，Typescript，Webpack配置

Question

我正在努力改造我的.NET Core應用程序，但不確定我需要采取哪種方式。 這是一個較舊的網站，最初是使用Asp.NET和Razor頁面構建的，現在我正試圖加快速度並更新UI以使其符合新的庫和方法（React，Angular等）。

由於無法在允許的時間內對整個UI進行重新編程，因此React似乎很合適。 所以我使用創建了一個新的React應用程序

create-react-app client-app --scripts-version=react-scripts-ts

在MVC區域文件夾下（每個區域都必須有自己的應用程序），我可以通過Power Shell服務和構建客戶端，並且一切正常。

我的問題是將生成的腳本的輸出目錄移到wwwroot文件夾。 我需要能夠從wwwroot加載腳本，因為由於現有項目的路由，過濾器和其他問題，我無法使用SPA服務。

這是我第一次使用React，因此我認為更改文件的輸出會很容易，但是我似乎無法弄清楚如何做。

我更新了tsconfig.json以使用更改輸出目錄

"outDir": "../../../wwwroot/areas",

而且這似乎沒有任何作用，我能夠獲得任何結果的唯一方法是使用npm run eject exit npm run eject React項目，然后得到一堆文件，包括webpack.config.prod.ts和webpack .config.dev.ts文件。 當我這樣做時，我注意到該目錄已編碼在wepack.config.ts 。

在網上尋找答案后，我注意到有些文章建議使用webpack-cli而不是npm並指定配置文件。 但是，當我這樣做時，我收到各種錯誤消息，說配置文件不在根目錄中，所以我嘗試將其移到./src目錄中，然后又遇到另一個錯誤，即找不到輸入模塊，因為它無法無法解析./src目錄，但是我找不到它引用src的位置。

我可以找到的大多數信息已過時或不起作用。 甚至Typescript.org網站仍在引用.NET Core1.X。

我確實找到了這個ReactJS.NET，但是看起來它不是很新，並且他們無法加載的示例給了很多錯誤。

是否有一種簡單的方法可以為此網站配置React，還是我不得不依靠AngularJS或KnockOut之類的舊庫？ 是否可以將React設置為這樣，並補充UI，使我仍然可以使用Razor頁面？

Answer 1

我能夠以所需的方式獲得此設置，包括Webpack熱模塊更換。

為了控制所需的配置，我需要通過運行以下命令來彈出react-client-app ：

`npm run eject`

這將在您的應用程序根目錄下創建一些目錄和文件，其中包含用於生產和調試的webpack配置。

對於我的項目，我不需要static/文件夾，為了更改文件的輸出，webpack.config中有幾個區域可以控制這些區域，例如：

webpack.config.js

output: {
  ...
  filename: 'js/[name].js',
  chunkFilename: 'js/[name].chunk.js',
  ...
},

....

// "url" loader works like "file" loader except that it embeds assets
// smaller than specified limit in bytes as data URLs to avoid requests.
// A missing `test` is equivalent to a match.
{
   test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.svg$/],
   loader: require.resolve('url-loader'),
   options: {
      limit: 10000,
      name: 'media/[name].[ext]',
   },
},

...

由於某種原因，默認的React TS模板（ create-react-app <name> --typescript ）沒有引用tsconfig.json 。 實現此目的的關鍵之一是安裝tsconfig-paths-webpack-plugin 。 這使用tsconfig.json定義的路徑來解析別名和路徑，這使您能夠包含來自自定義路徑的模塊，而不是使用諸如以下的相對路徑：

import <name> from 'core/common/<name>';

接下來的一項工作是在package.json添加一個homepage條目：

{
   "name": "<AppName>",
   "homepage": "/<AreaName>",
   "version": "0.1.0",
   ...
}

這會將homepage值附加到路徑上，並將其指向正確的區域。 我最初以為我必須手動構建客戶端，而不是使用Javascript Services（Spa），但事實並非如此。 在不同區域使用Spa確實可以使事情保持整潔，沒有理由輸出到wwwroot文件夾，因為SpaStaticFiles可以設置為任何根目錄和路徑。 下一步是更新Startup.cs以添加Javascript Services。

Startup.cs

  public IServiceProvider ConfigureServices(IServiceCollection services)
  {
     // In production, the Angular files will be served from this directory
     services.AddSpaStaticFiles(configuration =>
     {
        // Adds the path to the React files
        configuration.RootPath = "Areas/<AreaName>/ClientApp/build";
     });

     return services.ConfigureApplicationServices(Configuration);
  }

  application.UseSpaStaticFiles(new StaticFileOptions
  {
     // This is the key to getting things working, this is the path of the Area
     RequestPath = "/<AreaName>",
  });

  application.UseSpa(spa =>
  {
     spa.Options.SourcePath = "Areas/<AreaName>/ClientApp";

     if ( env.IsDevelopment() )
     {
        spa.UseReactDevelopmentServer(npmScript: "start");
     }
  });

現在可以從該區域提供React應用程序。 無需將文件復制到wwwroot，因為Javascript Servies會處理此問題，只需引用根目錄中的任何文件， homepage值就會放在路徑之前。

最后，要加載該應用程序，我通過一個標准的Controller / View啟動了該應用程序，並使用編譯后的index.html抓取了要返回的必需導入。

視圖

@{
   Layout = null;
}
<!doctype html>
<html lang="en">
<head>
   <meta charset="utf-8" />
   <link rel="shortcut icon" href="/<AreaName>/favicon.ico" />
   <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no" />
   <meta name="theme-color" content="#000000" />
   <link rel="manifest" href="/<AreaName>/manifest.json" />
   <title>React App</title>

   <!-- Webpack Styles -->
   <link href="/<AreaName>/css/vendors~main.chunk.css" rel="stylesheet">
   <link href="/<AreaName>/css/main.css" rel="stylesheet">
</head>
<body>
   <noscript>You need to enable JavaScript to run this app.</noscript>

   <div id="root"></div>

   <!-- Webpack Scripts -->
   <script src="/<AreaName>/js/vendors~main.chunk.js"></script>
   <script src="/<AreaName>/js/main.js"></script>
</body>
</html>

為了使react-router-dom在MVC及其路由中正常運行，您需要使用HashRouter而不是BrowserRouter 。

注意：如果在啟動開發會話之前使用npm run build ，將使用生產的生成文件，而不使用調試的編譯文件。 這將導致一些混亂，因為什么都不會更新。 要在進行更改時更新所有內容，只需刪除./build目錄並再次啟動。

我希望我能包括所有內容，即使不僅僅是發表評論，也能補充我錯過的內容。

.NET Core 2.X MVC，React，Typescript，Webpack配置

問題描述

1 個解決方案

解決方案1
1 已采納 2019-02-28 17:48:39

webpack.config.js

Startup.cs

視圖

.NET Core 2.X MVC，React，Typescript，Webpack配置

問題描述

1 個解決方案

解決方案1 1 已采納 2019-02-28 17:48:39

webpack.config.js

Startup.cs

視圖

解決方案1
1 已采納 2019-02-28 17:48:39