ASP.Net Core：在VS2017中搭建React.js + webpack + babel

Posted 2023-02-22

【中文标题】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 插件加载完整模板）

很高兴为您提供帮助！