我个人建议学习和使用 Webpack 和 NPM 来管理所有前端的东西，而不是乱用模板或 Nuget 包。无论如何，这些都是值得了解的技术。我知道一开始这很令人困惑，开始工作涉及大量的跑腿工作，并且没有唯一正确的方法，但最终最好自己掌握构建过程。
这是我将要描述的步骤的回购：https://github.com/tedchirvasiu/net-core-react-ts-starter
第 1 步： 从https://nodejs.org/en/download/ 安装 Node 和 NPM（如果您还没有的话）
第 2 步： 创建一个新的 empty .Net Core Web 应用程序。我们将尽可能地做到这一点。
第 3 步： 打开命令窗口并将工作目录更改为您的 项目 文件夹。或者，在 VS 中，您可以右键单击您的项目，然后单击“在文件资源管理器中打开文件夹”。然后在 Windows 资源管理器的地址栏中键入“cmd”。这应该会打开一个已设置工作目录的 cmd 窗口。
现在在命令窗口中输入以下 2 个命令：
npm init -y
npm install --save-dev webpack webpack-cli clean-webpack-plugin html-webpack-plugin typescript ts-loader react react-dom @types/react @types/react-dom
第一行将初始化你的 package.json 文件。第二行将安装 webpack、react、typescript、react 的类型和我们将用于构建过程的几个 webpack 插件。
第 4 步： 由于这将是一个单页应用程序，因此我们需要一个主控制器和视图来呈现初始页面。因此，转到您的项目，右键单击，添加 -> 新建文件夹并创建一个名为“Controllers”的文件夹。右键单击新创建的文件夹，转到 Add -> Controller... 并创建一个名为 DefaultController 的新空 MVC 控制器。这应该有一个返回 View() 的 Index 方法。
第 5 步： 创建一个名为“Views”的文件夹，并在其中创建一个名为“Default”的文件夹以匹配您的 DefaultController。到目前为止的基本 MVC 内容。这里有一些不同的东西：您将创建一个名为“Index_template.cshtml”的文件，其内容如下
<!DOCTYPE html>
<html>
<head>
<% for (var css in htmlWebpackPlugin.files.css) { %>
<link href="<%= '@Url.Content("~' + htmlWebpackPlugin.files.css[css] + '")' %>" rel="stylesheet">
<% } %>
</head>
<body>
<div id="app"></div>
<script>
window.baseUrl = "@Url.Content("~/")";
window.resourcesBaseUrl = "@Url.Content("~/dist/")";
</script>
<% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
<script src="<%= '@Url.Content("~' + htmlWebpackPlugin.files.chunks[chunk].entry + '")' %>"></script>
<% } %>
</body>
</html>
为什么是_template？每次您更改前端代码中的某些内容时，Webpack 都会重新构建您的应用程序并创建一个新的包（一个包含您所有代码的新的大 javascript 文件），并且这个包每次都会有不同的名称（因为它包含一个哈希所以你不会'缓存没有问题）。我们不想在每次生成新包时手动更新视图中的脚本引用，因此我们将使用 Webpack 生成实际的 Index.cshtml 文件。您可以看到它甚至不是有效的 cshtml（如果它引起问题，您可以将扩展名更改为其他内容），因为它具有那些类似于旧 ASPX 时代的
第 6 步：更新您的 Startup.cs 以使用 MVC，提供静态文件（以获取我们的 javascript 代码）并将所有未使用的路径路由到我们的 DefaultController。
public void ConfigureServices(IServiceCollection services) {
services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
}
public void Configure(IApplicationBuilder app, IHostingEnvironment env) {
if (env.IsDevelopment()) {
app.UseDeveloperExceptionPage();
}
app.UseStaticFiles();
app.UseMvc(routes => {
routes.MapRoute("default", "{controller=Default}/{action=Index}");
routes.MapRoute("catch-all", "{*url}", new { controller = "Default", action = "Index" });
});
}
第 7 步：在您的项目中，创建一个名为“tsconfig.json”的新文件，其内容如下：
{
"compilerOptions": {
"baseUrl": "./",
"target": "es5",
"lib": [
"es2017",
"dom"
],
"sourceMap": true,
"allowJs": true,
"noImplicitAny": false,
"moduleResolution": "node",
"jsx": "react"
}
}
确保 Build Action 设置为“None”，否则 VS 可能会对此感到厌烦并开始为您编译 ts 文件。
第 8 步： 现在我们需要配置 webpack。使用以下代码在项目根目录中创建另一个名为“webpack.config.js”的文件：
const path = require('path');
const devMode = process.env.NODE_ENV !== 'production';
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
entry: {
app: './src/main.tsx'
},
resolve: {
extensions: ['.ts', '.tsx', '.js', '.json']
},
devtool: 'source-map',
module: {
rules: [
{
test: /\.tsx?$/,
loader: "ts-loader",
include: path.resolve(__dirname, "src"),
}
]
},
plugins: [
new CleanWebpackPlugin(), //This empties the dist folder
new HtmlWebpackPlugin({
chunks: ['app'],
inject: false, //We generate the tags manually with lodash templating
template: path.resolve(__dirname, 'Views/Default/Index_template.cshtml'), //This is our template
filename: path.resolve(__dirname, 'Views/Default/Index.cshtml') //This is our actual Index.cshtml file
})
],
output: {
filename: devMode ? '[name].bundle.[hash].js' : '[name].bundle.[chunkhash].js',
path: path.resolve(__dirname, 'wwwroot/dist'), //This is where our bundles are going to go
publicPath: '/dist/'
}
};
第 9 步：我们几乎完成了设置。我们现在要做的就是为我们将用于构建的命令创建一些快捷方式。转到 package.json 文件并在“脚本”对象内，使用以下内容：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build-dev": "set NODE_ENV=development&& webpack -d",
"watch": "set NODE_ENV=development&& webpack --watch -d",
"build": "set NODE_ENV=production&& webpack -p"
}
第 10 步：好的，设置到此为止。剩下要做的就是在您的项目中创建一个名为“src”的新文件夹。在这里，您将拥有前端内容的所有源代码。在 src 中创建一个 main.tsx 文件。这将是您的切入点。在其中粘贴以下 hello-world 代码：
import * as React from 'react'
import * as ReactDOM from 'react-dom'
ReactDOM.render(<div>Hello world!</div>, document.getElementById('app'));
第 11 步： 最后让我们构建并运行我们的应用程序。在您在步骤 3 中打开的命令窗口中，键入
npm run watch
这将运行我们在 package.json 文件中第 9 步指定的命令。现在 webpack 将构建我们的应用程序并监视任何更改。当它看到 src 中的代码被修改时，它会自动重建。当您准备好发布时，请改用“npm run build”来创建优化的包。
现在只需点击播放并运行您的服务器 (F5)。你应该会看到你的 hello world react 应用程序 :)
不要忘记查看 repo 以供参考。