c# - 带有 webpack 和 typescript 的 Asp.Net Mvc Core 2.1 ReactRedux
问题描述
我创建了新的 Asp.Net Mvc Core 2.1 React Redux 项目。我在这个项目中添加了 webpack 和 typescript。现在我尝试运行它，我收到一条错误消息：
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
}
启动.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