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