我正在尝试在 .NET 核心 MVC 应用程序中使用react-grid-layout 。我已经设置了 node.js 并使用本指南做出反应，效果很好。现在我正在尝试包含一个 react-grid-layout 组件，但是在运行 webpack 时出现错误。首先它要求es2015安装 babel 预设，即使我已经在使用@babel/preset-env. 安装后es2015错误改为：
Module build failed: Error: Plugin/Preset files are not allowed to export objects, only functions.
搜索其他有此问题的人时，我只找到了帖子，解决方案是使用 babel 预设@babel/preset-react和@babel/preset-env，我已经这样做了。这是我到目前为止发现的：
- Babel Plugin/Preset 文件不允许导出对象，只能导出函数
- https://github.com/babel/babel/issues/6808
- https://github.com/babel/babel-loader/issues/575
我的webpack.config.js：
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const extractCSS = new ExtractTextPlugin('allstyles.css')
module.exports = {
entry: {'main': './wwwroot/src/app.js'},
output: {
path: path.resolve(__dirname, 'wwwroot/dist'),
filename: 'bundle.js',
publicPath: 'dist/'
},
plugins: [
extractCSS,
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
Popper: ['popper.js', 'default']
}),
new webpack.optimize.UglifyJsPlugin()
],
module: {
rules: [
{
test: /\.css$/,
use: extractCSS.extract(['css-loader? minimize'])
},
{
test: /\.js?$/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-react' ,'@babel/preset-env']
}
}
}]
}
};
和我的package.json
{
"name": "ASPNetCoreReact",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"wbp": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"babel-preset-es2015": "^6.24.1"
},
"devDependencies": {
"@babel/core": "^7.0.0-beta.40",
"@babel/preset-env": "^7.0.0-beta.40",
"@babel/preset-react": "^7.0.0-beta.40",
"aspnet-webpack": "^2.0.3",
"babel-loader": "^8.0.0-beta.2",
"bootstrap": "^4.0.0",
"css-loader": "^0.28.10",
"extract-text-webpack-plugin": "^3.0.2",
"isomorphic-fetch": "^2.2.1",
"jquery": "^3.3.1",
"popper.js": "^1.13.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-grid-layout": "^0.16.5",
"style-loader": "^0.20.2",
"uglifyjs-webpack-plugin": "^1.2.2",
"webpack": "^3.11.0",
"webpack-hot-middleware": "^2.21.1"
},
"description": ""
}
我还将一个示例项目推送到 github，在那里可以重现错误。
错误可能来自哪里的任何想法？也许我只是设置了错误？我对 .net 核心、节点和反应完全陌生，所以这很可能。提前致谢。