带Webpack和打字稿的Asp.Net Mvc Core 2.1 ReactRedux

时间:2018-09-28 12:55:28

标签: c# reactjs typescript webpack asp.net-core-2.1

我创建了一个新的Asp.Net Mvc Core 2.1 React Redux项目。我向该项目添加了webpack和打字稿。现在,我尝试运行它,我收到一条错误消息:

TimeoutException: The create-react-app server did not start listening for requests within the timeout period of 50 seconds. Check the log output for error information.

我列举了一些例子,但没有发现任何可能被错误设置的东西。

这是我的package.json

{
    "name": "Core_2_1_Templates.Web.ReactReduxTs",
    "version": "0.1.0",
    "private": true,
    "devDependencies": {
        "@types/react": "16.4.14",
        "@types/react-dom": "16.0.7",
        "@types/webpack-env": "1.13.6",
        "@types/react-redux": "6.0.9",
        "@types/react-router-dom": "4.3.1",
        "@types/react-router-redux": "5.0.16",
        "@types/redux-thunk": "2.1.32",
        "@types/redux": "3.6.31",
        "@types/redux-devtools-extension": "2.13.2",
        "@types/rimraf": "2.0.2",
        "@types/node": "10.10.1",
        "@types/jest": "23.3.2",
        "react-hot-loader": "4.3.11",
        "awesome-typescript-loader": "5.2.1",
        "babel-core": "6.26.3",
        "clean-webpack-plugin": "0.1.19",
        "typescript": "3.0.3",
        "webpack": "4.20.2",
        "webpack-cli": "3.1.0",
        "webpack-dev-middleware": "3.3.0",
        "webpack-hot-middleware": "2.24.0"
    },
    "dependencies": {
        "bootstrap": "^3.3.7",
        "react": "16.5.2",
        "react-bootstrap": "0.32.4",
        "react-dom": "16.5.2",
        "react-redux": "5.0.7",
        "react-router-bootstrap": "^0.24.4",
        "react-router-dom": "4.3.1",
        "react-router-redux": "5.0.0-alpha.9",
        "react-scripts": "^2.0.0",
        "redux": "4.0.0",
        "redux-thunk": "2.3.0",
        "rimraf": "2.6.2",
        "ts-loader": "5.1.1"
    },
    "scripts": {
        "start": "webpack --watch"
    }
}

webpack.config

const path = require('path');
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = (env) => {
    const isDevBuild = !(env && env.prod);
    console.log("IsDevbuild: " + isDevBuild);

    const outputDir = (env && env.publishDir)
        ? env.publishDir
        : __dirname;

    console.log("outputDir: " + outputDir);

    return [{
        mode: isDevBuild ? 'development' : 'production',

        devtool: 'inline-source-map',

        stats: { modules: false },

        entry: {
            'App': path.join(outputDir, 'src') + "/App.tsx"
        },

        watchOptions: {
            ignored: /node_modules/
        },

        output: {
            filename: "src/[name].js",
            path: outputDir,
            publicPath: '/'
        },

        resolve: {
            // Add '.ts' and '.tsx' as resolvable extensions.
            extensions: [".ts", ".tsx", ".js", ".json"]
        },

        devServer: {
            hot: true
        },

        module: {
            rules: [
                // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
                {
                    test: /\.tsx?$/,
                    include: /ClientApp/,
                    loader: [
                        {
                            loader: 'awesome-typescript-loader',
                            options: {
                                useCache: true,
                                useBabel: true,
                                babelOptions: {
                                    babelrc: false,
                                    plugins: ['react-hot-loader/babel'],
                                }
                            }
                        }
                    ]
                }
            ]
        },

        plugins: [
            new CleanWebpackPlugin(path.join(outputDir)),
            new CheckerPlugin()
        ],

        externals: {
            'react': 'React',
            'react-dom': 'ReactDOM',
        },
    }];
};

tsconfig.json

{
    "compilerOptions": {
        "sourceMap": true,
        "module": "commonjs",
        "moduleResolution": "node",
        "target": "es6",
        "jsx": "react"
    },
    "exclude": [
        "node_modules"
    ],
    "compileOnSave": false
}

Startup.cs

public class Startup
{
    public Startup(IConfiguration configuration)
    {
        Configuration = configuration;
    }

    public IConfiguration Configuration { get; }

    // This method gets called by the runtime. Use this method to add services to the container.
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);

        // In production, the React files will be served from this directory
        services.AddSpaStaticFiles(configuration =>
        {
            configuration.RootPath = "ClientApp/build";         
        });
    }

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
        else
        {
            app.UseExceptionHandler("/Error");
            app.UseHsts();
        }

        app.UseHttpsRedirection();
        app.UseStaticFiles();
        app.UseSpaStaticFiles();

        app.UseMvc(routes =>
        {
            routes.MapRoute(
                name: "default",
                template: "{controller}/{action=Index}/{id?}");
        });

        app.UseSpa(spa =>
        {
            spa.Options.SourcePath = "ClientApp";               

            if (env.IsDevelopment())
            {
                //app.UseWebpackDevMiddleware(new Microsoft.AspNetCore.SpaServices.Webpack.WebpackDevMiddlewareOptions
                //{
                //  HotModuleReplacement = true,
                //  ReactHotModuleReplacement = true
                //});

                //spa.Options.StartupTimeout = TimeSpan.FromSeconds(180);
                spa.UseReactDevelopmentServer(npmScript: "start");                  
            }
        });
    }
}

npm运行开始输出

PS C:\Projects\Local\ASP.NET\Core_2_1_Templates\Core_2_1_Templates.Web.ReactReduxTs\ClientApp> npm run start

> Core_2_1_Templates.Web.ReactReduxTs@0.1.0 start C:\Projects\Local\ASP.NET\Core_2_1_Templates\Core_2_1_Templates.Web.ReactReduxTs\ClientApp
> webpack --watch

IsDevbuild: true
outputDir: C:\Projects\Local\ASP.NET\Core_2_1_Templates\Core_2_1_Templates.Web.ReactReduxTs\ClientApp
clean-webpack-plugin: C:\Projects\Local\ASP.NET\Core_2_1_Templates\Core_2_1_Templates.Web.ReactReduxTs\ClientApp is equal to project root. Skipping...

webpack is watching the files…

i 「atl」: Using typescript@3.0.3 from typescript
i 「atl」: Using tsconfig.json from C:/Projects/Local/ASP.NET/Core_2_1_Templates/Core_2_1_Templates.Web.ReactReduxTs/ClientApp/tsconfig.json (in a forked process)
i 「atl」: Checking started in a separate process...
Hash: 6ce070b06957d40aeb70
Version: webpack 4.20.2
Child
    Hash: 6ce070b06957d40aeb70
    Time: 4641ms
    Built at: 2018-09-28 16:38:58
         Asset      Size  Chunks             Chunk Names
    src/App.js  2.32 MiB     App  [emitted]  App
    Entrypoint App = src/App.js
i 「atl」: Time: 1597ms

0 个答案:

没有答案