Javascript React.js与ASP MVC和create React app的集成
我是React world的新手,我正在尝试将它集成到一个使用ASP MVC.net的新项目中。 我想将React.js与不感兴趣的一起使用 我见过一些人不使用CRA命令,而是自己配置构建设置(webpack、babel等),我正在尝试这种方法,但我担心如果项目增长,我将无法跟踪更新等 在这种情况下,您需要将webpack捆绑文件的输出添加到index.cshtml中Javascript React.js与ASP MVC和create React app的集成,javascript,c#,.net,asp.net-mvc,reactjs,Javascript,C#,.net,Asp.net Mvc,Reactjs,我是React world的新手,我正在尝试将它集成到一个使用ASP MVC.net的新项目中。 我想将React.js与不感兴趣的一起使用 我见过一些人不使用CRA命令,而是自己配置构建设置(webpack、babel等),我正在尝试这种方法,但我担心如果项目增长,我将无法跟踪更新等 在这种情况下,您需要将webpack捆绑文件的输出添加到index.cshtml中 @节脚本{ }我不认为用CRA做你想做的事情是可能的(我也希望如此),而且我相信在弹出后你最终会遇到的复杂性太高,难以管理
@节脚本{
}
我不认为用CRA做你想做的事情是可能的(我也希望如此),而且我相信在弹出后你最终会遇到的复杂性太高,难以管理
我的出发点是:一个大型ASP MVC应用程序,在单个MVC控制器/视图(默认索引页)中运行Angular.js前端。
我的目标是:停止Angular.js应用程序的增长,尽可能使用React开发新功能,即当它独立于现有UI时;让我们称之为新模块。我仍然需要将所有内容都保存在同一个MVC应用程序中,因为它提供身份验证和授权等功能
解决方案:一个定制的(关于CRA)网页包构建工具链,其起点是您提供的。多亏了,我已经能够添加热加载,经过几个小时的反复试验,我添加了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'
},
}
};
B.法律改革委员会
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
"@babel/plugin-transform-runtime"
]
}
埃斯林先生
{
"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优化,但我认为这不会太难。你找到解决方案了吗?