在Visual Studio中查看ASP.NET MVC应用React浏览器日志真实错误的方法

嘿，我懂你的情况——已经在应用里装好了ReactJS.NET，教程里的原生React代码能正常跑，但你更习惯用TypeScript+Webpack那套现代React开发流程，想把这套流程搬到单页场景里对吧？下面给你一步步梳理可行的方案：

1. 搭建Webpack+TypeScript基础环境 #

首先得把你的TSX代码打包成ReactJS.NET能兼容的bundle：

• 先初始化npm项目（如果还没做）：npm init -y
• 安装必要依赖：npm install react react-dom typescript webpack webpack-cli ts-loader @types/react @types/react-dom --save-dev
• 在项目根目录创建tsconfig.json，配置TypeScript编译规则：

{
  "compilerOptions": {
    "jsx": "react",
    "module": "ESNext",
    "target": "ES5",
    "moduleResolution": "Node",
    "strict": true,
    "outDir": "./dist"
  },
  "include": ["./src/**/*"]
}

• 创建webpack.config.js，配置打包的入口、规则和输出：

const path = require('path');

module.exports = {
  entry: './src/index.tsx',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

2. 编写TypeScript版React组件 #

在src目录下新建index.tsx，用TSX重写你的CommentBox组件：

import React from 'react';
import ReactDOM from 'react-dom';

const CommentBox = () => {
  return (
    <div className="commentBox">
      Hello, world! I am a CommentBox.
    </div>
  );
};

ReactDOM.render(
  <CommentBox />,
  document.getElementById('content')
);

3. 集成到ReactJS.NET单页中 #

• 运行Webpack打包：npx webpack --mode production，生成dist/bundle.js文件
• 在你的页面中，先引入ReactJS.NET提供的React和ReactDOM脚本（也可以通过Webpack配置让它直接用全局变量，后面说），再引入打包好的bundle：

<div id="content"></div>
<script src="@Url.Content("~/Scripts/react/react.development.js")"></script>
<script src="@Url.Content("~/Scripts/react/react-dom.development.js")"></script>
<script src="@Url.Content("~/dist/bundle.js")"></script>

• 要是不想单独引入React脚本，可以在webpack.config.js里添加externals配置，让Webpack把React和ReactDOM当作全局变量处理，复用ReactJS.NET提供的版本：

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

4. 开发时的效率优化 #

如果想在开发时自动打包刷新，可以安装webpack-dev-server：npm install webpack-dev-server --save-dev，然后在webpack.config.js里添加devServer配置，这样修改代码后页面会自动刷新，不用手动每次打包。

这样一来，你就能在ReactJS.NET的单页场景下，继续用熟悉的TypeScript+Webpack流程开发，既保留ReactJS.NET的服务端能力，又不丢现代前端的开发体验～

内容的提问来源于stack exchange，提问作者Lars Holdgaard