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的主要内容,如果未能解决你的问题,请参考以下文章