当前位置: 代码迷 >> JavaScript >> React.js与ASP MVC与create-react-app的集成
  详细解决方案

React.js与ASP MVC与create-react-app的集成

热度:54   发布时间:2023-06-05 16:03:24.0

我是React世界的新手,我正在尝试将它集成到一个使用ASP MVC .net的新项目中。 我想将React.js与一起使用,对不感兴趣。

我看过几个没有使用CRA命令的 ,而是他们自己配置构建集(webpack,babel等),我正在尝试这种方法,但我担心如果项目增长我将失去追踪更新等

在该 ,您需要将webpack捆绑文件的输出添加到index.cshtml中。

 <div id="root"></div> @section scripts { <script src="~/Scripts/React/dist/bundle.js"></script> } 

但是当我使用CRA命令时,我在开发期间无法访问该文件,只有在我为生产构建时才能访问该文件。

我有点迷失在这里,在没有弹射的情况下用CRA实现我需要的最好的方法是什么?

我非常感谢任何帮助:)

我不认为用CRA做你想做的事情(我也想做),我相信在弹出后你最终会遇到的复杂性太高而无法控制。

我的出发点:在单个MVC Controller / View(默认索引页面)中运行Angular.js前端的大型ASP MVC应用程序。 我的目标:尽可能停止增长Angular.js应用程序并使用React开发新功能,即当它独立于现有UI时; 我们称之为新模块。 我仍然需要将所有内容保存在同一个MVC应用程序中,因为它提供了身份验证和授权等功能。

解决方案:一个自定义(相对于CRA)webpack构建工具链,其起点是您提供的 。 感谢 ,我已经能够添加热重新加载,经过几个小时的试验和错误后,我添加了css,图像和字体的加载器。 捆绑的结果肯定不如CRA的结果优化,但它与旧的Angular.js共存,所以我相信它已经足够好了。

这是一些代码。

webpack.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const WebpackNotifierPlugin = require('webpack-notifier');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const webpack = require('webpack');

const PUBLIC_PATH = 'Scripts/react/dist';

module.exports = (env, arg) => {

    const isDevelopment = arg.mode === 'development';

    const fileLoaderName = file => {
        if (isDevelopment)
            return '[folder]/[name].[ext]';
        return '[folder]/[name].[ext]?[contenthash]';

    };

    return {
        entry: './app.js',
        watch: isDevelopment,
        devtool: isDevelopment ? 'source-map' : undefined,
        module: {
            rules: [
                {
                    test: /\.(js|jsx)$/,
                    exclude: /node_modules/,
                    use: [
                        'babel-loader',
                        {
                            loader: 'eslint-loader',
                            options: {
                                fix: true
                            }
                        }
                    ],
                },
                {
                    test: /\.css$/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        'css-loader'
                    ]
                },
                {
                    test: /\.(png|jpe?g|gif|svg)$/i,
                    use: [
                        {
                            loader: 'file-loader',
                            options: {
                                name: fileLoaderName,
                                publicPath: PUBLIC_PATH,
                                postTransformPublicPath: p => `__webpack_public_path__ + ${p}`
                            }
                        }
                    ]
                },
                {
                    test: /\.(woff|woff2|ttf|otf|eot)$/i,
                    use: [
                        {
                            loader: 'file-loader',
                            options: {
                                name: fileLoaderName,
                                publicPath: PUBLIC_PATH,
                                postTransformPublicPath: p => `__webpack_public_path__ + ${p}`
                            }
                        }
                    ]
                }
            ],
        },
        plugins: [
            new webpack.ProgressPlugin(),
            new WebpackNotifierPlugin(),
            new BrowserSyncPlugin(),
            new CleanWebpackPlugin(),
            new MiniCssExtractPlugin({ filename: "bundle.css" })
        ],
        resolve: {
            extensions: ['*', '.js', '.jsx']
        },
        output: {
            path: __dirname + '/dist',
            publicPath: '/',
            filename: 'bundle.js'
        },
    }

};

.babelrc

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-transform-runtime"
  ]
}

.eslintrc

{
  "extends": [
    "plugin:react-app/recommended",
    "prettier"
  ],
  "plugins": [
    "prettier"
  ],
  "rules": {
    "prettier/prettier":  ["error"],
    "quotes": [
      "error",
      "single",
      { "allowTemplateLiterals": true }
    ]
  }
}

.prettierrc

{
  "singleQuote": true
}

的package.json

  ...
  "scripts": {
    "start": "webpack --mode development",
    "build": "webpack --mode production",
    ...
  },

还有一些有用的东西缺失,我计划在未来添加,比如css模块和其他css优化,但我认为这不会很难。

  相关解决方案