【发布时间】：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 嗯，看起来不像
标签： c# reactjs webpack asp.net-core