为 ASP.NET MVC 设置 React 环境

照片由Zoltan Tasi在Unsplash上拍摄

我有机会使用 AngularJS（是的，第一个版本）更新旧版 ASP.NET MVC 网站，以使用 Webpack 和 Babel 7（过去使用脚本标签导入 AngularJS 文件）。

上一篇文章《为 ASP.NET MVC 5 设置 ES6 环境》有点过时，因为它使用的是旧版本的 babel 和 webpack，所以我决定写一篇更简洁的文章来开始使用最新的库。

由于我已经转向 React，我将向您展示如何为 ASP.NET MVC 5 设置 React 环境。

🧐 先决条件

我假设您熟悉 NPM 和 Webpack，

因此我不会过多详细介绍 NPM 和 Webpack 中每个选项的内容。

👣 设置步骤

创建 ASP.NET MVC 网站
创建并配置 NPM 配置文件（package.json）
创建并配置 Babel 配置文件（.babelrc）
创建并配置Webpack配置文件（webpack.config.js）
安装 NPM 包
安装 Visual Studio 扩展（NPM 任务运行器）

1.创建 ASP.NET MVC 网站

创建一个新的 ASP.NET MVC 项目（选择您的 .NET 框架）。

并选择一个模板。

2.创建并配置NPM配置文件（package.json）

在项目根目录中添加一个新项目。

创建 NPM 配置文件，package.json。

并添加一个脚本部分。package.json初始状态如下所示。

	{
	"version": "1.0.0",
	"name": "asp.net",
	"private": true,
	"scripts": {
	"dev": "webpack --mode development --watch",
	"build": "webpack"
	},
	"devDependencies": {}
	}

	{
	"version": "1.0.0",
	"name": "asp.net",
	"private": true,
	"scripts": {
	"dev": "webpack --mode development --watch",
	"build": "webpack"
	},
	"devDependencies": {}
	}

view raw before NPM installation package.json hosted with ❤ by GitHub

3.创建并配置Babel配置文件（.babelrc）

在与上一步创建的文件.babelrc相同的目录中添加一个新文件。package.json

并添加以下 babel 选项。

	{
	"presets": ["@babel/preset-env", "@babel/preset-react"],
	"plugins": ["@babel/plugin-proposal-class-properties"]
	}

view raw .babelrc hosted with ❤ by GitHub

	{
	"presets": ["@babel/preset-env", "@babel/preset-react"],
	"plugins": ["@babel/plugin-proposal-class-properties"]
	}

view raw .babelrc hosted with ❤ by GitHub

@babel/preset-env – 启用最新的 JavaScript 语法
@babel/preset-react – 添加对 React 语法的支持
@babel/plugin-proposal-class-properties – 增加了对 JavaScript 类中的实例和/或静态成员声明的支持。

4.创建并配置Webpack配置文件（webpack.config.js）

webpack.config.js在项目根目录中创建一个名为的文件（与package.json&相同的位置.babelrc）并对其进行配置，如下所示。

	"use strict";

	var path = require("path");
	var WebpackNotifierPlugin = require("webpack-notifier");
	var BrowserSyncPlugin = require("browser-sync-webpack-plugin");

	module.exports = {
	entry: "./Scripts/Home/react/index.js",
	output: {
	path: path.resolve(__dirname, "./Scripts/dist/Home/react"),
	filename: "bundle.js"
	},
	module: {
	rules: [
	{
	test: /\.js$/,
	exclude: /node_modules/,
	use: {
	loader: "babel-loader"
	}
	}
	]
	},
	devtool: "inline-source-map",
	plugins: [new WebpackNotifierPlugin(), new BrowserSyncPlugin()]
	};

view raw webpack.config.js hosted with ❤ by GitHub

	"use strict";

	var path = require("path");
	var WebpackNotifierPlugin = require("webpack-notifier");
	var BrowserSyncPlugin = require("browser-sync-webpack-plugin");

	module.exports = {
	entry: "./Scripts/Home/react/index.js",
	output: {
	path: path.resolve(__dirname, "./Scripts/dist/Home/react"),
	filename: "bundle.js"
	},
	module: {
	rules: [
	{
	test: /\.js$/,
	exclude: /node_modules/,
	use: {
	loader: "babel-loader"
	}
	}
	]
	},
	devtool: "inline-source-map",
	plugins: [new WebpackNotifierPlugin(), new BrowserSyncPlugin()]
	};

view raw webpack.config.js hosted with ❤ by GitHub

Webpack 输出一个包，因此让我们在razor 文件./Scripts/dist/Home/react/bundle.js中添加脚本。View\Home\Index.cshtml

view raw bundle.js hosted with ❤ by GitHub

view raw bundle.js hosted with ❤ by GitHub

5.安装NPM包

现在让我们安装 NPM 包以启用最新的 JavaScript 和 React 语法。

npm install --save-dev @babel/cli @babel/core @babel/plugin-proposal-class-properties @babel/preset-env @babel/preset-react babel-loader browser-sync browser-sync-webpack-plugin webpack webpack-cli webpack-notifier

view raw Install NPM packages - dev dependencies hosted with ❤ by GitHub

npm install react react-dom

view raw Install NPM packages - prod dependencies hosted with ❤ by GitHub

npm install --save-dev @babel/cli @babel/core @babel/plugin-proposal-class-properties @babel/preset-env @babel/preset-react babel-loader browser-sync browser-sync-webpack-plugin webpack webpack-cli webpack-notifier

view raw Install NPM packages - dev dependencies hosted with ❤ by GitHub

npm install react react-dom

view raw Install NPM packages - prod dependencies hosted with ❤ by GitHub

babel-loader – Babel 的 Webpack 加载器
browser-sync & browser-sync-webpack-plugin – 代码更改时同步浏览器
webpack和webpack-cli – 用于运行 Webpack
webpack-notifier – 显示漂亮的 webpack 通知
react & react-dom – React 库

6.安装 Visual Studio 扩展（NPM 任务运行器）

这是一个可选步骤，但为了让我们的生活更轻松，让我们安装一个 Visual Studio 扩展，NPM Task Runner，用于从 Visual Studio 运行 NPM 脚本。

⚛ 让我们写一些 React 代码

现在我们准备使用最新的 JavaScript 语法（ES6+）编写 React 脚本。

Views\Home\Index.cshtml让我们通过删除除ViewBag.Title部分和添加之外的所有内容来在文件中添加 React 的入口点<div id="app"></div>。

现在我们有了一个入口点，让我们在目录index.js下编写一个简单的 React 文件Scripts\Home\react。

	import React from 'react';
	import { render } from 'react-dom';

	const App = () => (
	<React.Fragment>
	<h1>React in ASP.NET MVC!</h1>
	<div>Hello React World</div>
	</React.Fragment>
	);

	render(<App />, document.getElementById('app'));

view raw index.js hosted with ❤ by GitHub

	import React from 'react';
	import { render } from 'react-dom';

	const App = () => (
	<React.Fragment>
	<h1>React in ASP.NET MVC!</h1>
	<div>Hello React World</div>
	</React.Fragment>
	);

	render(<App />, document.getElementById('app'));