ASP.Net Core：在VS2017中搭建React.js + webpack + babel
Posted
技术标签:
【中文标题】ASP.Net Core：在VS2017中搭建React.js + webpack + babel【英文标题】：ASP.Net Core: Setting up React.js + webpack + babel in VS2017 【发布时间】：2018-01-08 12:13:20 【问题描述】：在尝试了ReactJS（在webpack-server 上运行）之后，决定在Visual Studio 2017 中尝试ASP.Net Core 项目。
-
我创建了空的
ASP.Net Core 项目。
删除了所有内容
wwwroot 以及与 bower 相关的内容。
删除了所有控制器
除了Home 并删除了除Home/Index.cshtml 之外的视图
已添加
webpack.config.js、package.json 和 .babelrc
从Nuget 安装Asp.React
我的package：
"name": "TrainDiary",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts":
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
,
"keywords": [],
"author": "",
"license": "ISC",
"dependencies":
"css-loader": "^0.28.4",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"style-loader": "^0.18.2"
,
"devDependencies":
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.4",
"html-webpack-plugin": "^2.29.0",
"clean-webpack-plugin": "^0.1.16",
"style-loader": "^0.18.2",
"webpack": "^3.4.1",
"webpack-dev-server": "^2.6.1"
,
"-vs-binding":
"BeforeBuild": [
"build"
]
我的webpack config：
var CleanWebpackPlugin = require('clean-webpack-plugin');
let path = require('path');
const bundleFolder = "wwwroot/build/";
var HTMLWebpackPlugin = require('html-webpack-plugin');
var HTMLWebpackPluginConfig = new HTMLWebpackPlugin(
template: path.resolve(__dirname, 'Scripts/app/index.html'),
filename: 'index.html',
inject: 'body'
);
module.exports =
entry: path.resolve(__dirname, 'Scripts/app/Core/app.js'),
module:
loaders:[
test: /\.js$/,
exclude: [/node_modules/],
loader: 'babel-loader'
,
test: /\.css$/,
loader: "style-loader!css-loader"
]
,
output:
filename: 'index.js',
path: path.resolve(__dirname, bundleFolder)
,
stats:
colors: true,
modules: true,
reasons: true,
errorDetails: true
,
plugins: [ new CleanWebpackPlugin([bundleFolder]), HTMLWebpackPluginConfig]
;
babelrc 就是这么简单 presets:['react']
所以，当我运行npm run build 时，一切都很好，在wwwroot 中它也会生成index.js 和index.html。
但是当我运行我的应用程序时没有任何反应！我根本没有什么意思。空白的白页。控制台没有错误。就这样。
另外，这是我的Startup.cs：
namespace TrainDiary.Web
using React.AspNet;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using Microsoft.AspNetCore.Http;
public class Startup
public Startup(IHostingEnvironment env)
var builder = new ConfigurationBuilder()
.SetBasePath(env.ContentRootPath)
.AddJsonFile("appsettings.json", optional: false, reloadOnChange: true)
.AddJsonFile($"appsettings.env.EnvironmentName.json", optional: true)
.AddEnvironmentVariables();
Configuration = builder.Build();
public IConfigurationRoot Configuration get;
// This method gets called by the runtime. Use this method to add services to the container.
public void ConfigureServices(IServiceCollection services)
// Add framework services.
services.AddMvc();
services.AddLogging();
services.AddSingleton<IHttpContextAccessor, HttpContextAccessor>();
services.AddReact();
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
loggerFactory.AddConsole(Configuration.GetSection("Logging"));
loggerFactory.AddDebug();
if (env.IsDevelopment())
app.UseDeveloperExceptionPage();
app.UseBrowserLink();
else
app.UseExceptionHandler("/Home/Error");
app.UseReact(config =>
);
app.UseStaticFiles();
app.UseDefaultFiles();
app.UseMvc(routes =>
routes.MapRoute(
name: "default",
template: "controller=Home/action=Index/id?");
);
HomeController:
public class HomeController : Controller
public IActionResult Index()
return View();
Home/Index.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello world</title>
</head>
<body>
<!-- Load all required scripts (React + the site's scripts) -->
@Html.Partial("~/wwwroot/build/index.html")
</body>
</html>
怎么会？这种方法有什么问题？
UPD：
入口点index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './app/Core/app.js'
ReactDOM.render(
<App />,
document.getElementById("content")
);
Core/app.js 在这里
import React from 'react';
import ReactDOM from 'react-dom';
export default class App extends React.Component
render()
return (
<div>
Hello, React!
</div>
)
index.html 我们尝试在Index.cshtml 中渲染
<body>
<div id='content'></div>
</body>
渲染内容的屏幕截图：
UPD2：
按照 Jose 的建议 - 像这样更改了 Index.cshtml：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello world</title>
<script src="~/build/index.js"></script>
</head>
<body>
<!-- Load all required scripts (React + the site's scripts) -->
<div id='content'></div>
</body>
</html>
并删除了webpack-html-plugin。
这就是我现在得到的（css-loader 顺便说一句）：
UPD3：
修复了webpack.config（入口点）中的一些错误内容，但仍然没有成功：
var CleanWebpackPlugin = require('clean-webpack-plugin');
let path = require('path');
const bundleFolder = "wwwroot/build/";
module.exports =
entry:'./Scripts/index.js',
module:
loaders:[
test: /\.js$/,
exclude: [/node_modules/],
loader: 'babel-loader'
,
test: /\.css$/,
loader: "style-loader!css-loader"
]
,
output:
filename: 'index.js',
path: path.resolve(__dirname, bundleFolder)
,
stats:
colors: true,
modules: true,
reasons: true,
errorDetails: true
,
plugins: [ new CleanWebpackPlugin([bundleFolder])]
;
UPD4：
现在可以了！在以前的情况下，我只是没有注意调试器控制台，错误如here 所述。
所以我就这样改了Index.cshtml：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello world</title>
</head>
<body>
<!-- Load all required scripts (React + the site's scripts) -->
<div id='content'></div>
<script src="~/build/index.js"></script>
</body>
</html>
现在好了！
【问题讨论】：
你能分享你的反应应用代码吗？也许你应该在 react 添加所有应用程序的地方包含 ？ 当然！我什么时候在家会分享 @JoséQuintoZamora 抱歉，昨天没能回家哈哈 如果您检查空页面的源代码。你能看到 div id = content 吗？ @JoséQuintoZamora 嗯，看起来不像 【参考方案1】：cmets建议总结：
确保在您的应用代码中呈现
删除 HTMLWebpackPlugin 并更改 Index.cshtml 以包含 bundle.js（您的 mvc 视图中的部分视图正在使用 html wepack 插件加载完整模板）
很高兴为您提供帮助！
【讨论】：
以上是关于ASP.Net Core：在VS2017中搭建React.js + webpack + babel的主要内容，如果未能解决你的问题，请参考以下文章