我正在尝试使用共享的通用配置创建prod和dev webpack配置，当我尝试运行compile和build命令时，似乎遇到了Babel / core问题。有趣的是，当我运行webpack时，它会被罚款。当我尝试运行npm run compile或npm run build时收到的错误请参见下面的内容（有关确切命令，请参见package.json：
ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: [BABEL] /Users/nigelfinley/Desktop/Projects/Final
Project/Showcase-Playlist-Generator/src/index.js: .default is not a
valid Plugin property at Object.keys.forEach.key
(/Users/nigelfinley/Desktop/Projects/Final Project/Showcase-Playlist-
Generator/node_modules/@babel/core/lib/
config/validation/plugins.js:52:56)
at Array.forEach (<anonymous>)
at validatePluginObject (/Users.../node_modules/@babel/core/lib/config/validation/plugins.js:50:20)
at instantiatePlugin (/Users.../node_modules/@babel/core/lib/config/full.js:209:55)
at cachedFunction (/Users.../node_modules/@babel/core/lib/config/caching.js:33:19)
at loadPluginDescriptor (/Users.../node_modules/@babel/core/lib/config/full.js:200:10)
at config.plugins.reduce (/Users.../node_modules/@babel/core/lib/config/full.js:69:20)
at Array.reduce (<anonymous>)
at recurseDescriptors (/Users.../node_modules/@babel/core/lib/config/full.js:67:38)
at loadFullConfig (/Users.../node_modules/@babel/core/lib/config/full.js:108:6)
at process.nextTick (/Users.../node_modules/@babel/core/lib/transform.js:28:33)
at _combinedTickCallback (internal/process/next_tick.js:131:7)
at process._tickCallback (internal/process/next_tick.js:180:9)
@ multi ./src/index.js main[0]
有关我的package.json和webpack配置，请参见下文。
package.json：
scripts": {
"compile": "NODE_ENV=development webpack --config webpack.dev.js -w",
"start": "nodemon server.js",
"build": "NODE_ENV=production webpack --config webpack.prod.js -p",
"lint": "eslint ."
},
"dependencies": {
"@babel/plugin-proposal-class-properties": "^7.0.0-beta.55",
"npm": "^3.10.8",
"querystring": "^0.2.0",
"react": "^16.4.2",
"react-autosuggest": "^9.3.4",
"react-bootstrap": "^0.31.0",
"react-bootstrap-date-picker": "^5.1.0",
"react-dates": "^17.2.0",
"react-datetime": "^2.8.6",
"react-dom": "^16.4.2",
"react-redux": "^5.0.6",
"react-router": "^4.2.0",
"react-router-dom": "^4.3.1",
"react-router-form": "^1.0.2",
"react-router-redux": "^5.0.0-alpha.9",
"redis": "^2.6.5",
"redux": "^4.0.0",
"redux-immutable-state-invariant": "^2.1.0",
"redux-thunk": "^2.2.0",
"request": "^2.79.0",
"uglifyjs-webpack-plugin": "^1.3.0",
"url-loader": "^0.5.7"
},
"engines": {
"node": ">=8.0.0"
},
"devDependencies": {
"@babel/core": "^7.0.0",
"@babel/plugin-proposal-object-rest-spread": "^7.0.0-beta.55",
"@babel/preset-env": "^7.0.0",
"@babel/preset-react": "^7.0.0-beta.55",
"eslint": "^5.1.0",
"eslint-plugin-import": "2.2.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "6.10.3",
"json-loader": "^0.5.7",
"morgan": "^1.9.0",
"react-hot-loader": "^1.3.1",
"redux-devtools-extension": "^2.13.5",
"webpack": "^4.17.1",
"webpack-bundle-analyzer": "^2.2.1",
"webpack-cli": "^3.1.0",
"webpack-dev-middleware": "^3.1.3",
"webpack-hot-middleware": "^2.18.0",
"webpack-merge": "4.1.4",
"webpack-node-externals": "^1.6.0"
}
}
webpack.common.js
const path = require('path');
module.exports = {
entry: [
'./src/index.js',
],
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'public'),
publicPath: '/'
},
devtool: 'eval-source-map',
cache: true,
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react'],
plugins: [require('@babel/plugin-proposal-class-properties')]
}
}
},
{
test: /\.(jpg|png|svg)$/,
loader: 'url-loader',
options: {
limit: 25000
}
},
{
test: /\.json$/,
loader: 'json-loader'
},
{
test: /\.(eot|ttf|woff|woff2)$/,
loader: 'file-loader',
options: {
name: 'fonts/[name].[ext]'
}
}
],
},
resolve: {
extensions: ['.webpack.js', '.web.js', '.js', '.jsx']
},
node: {
console: true,
fs: 'empty',
net: 'empty',
tls: 'empty'
},
devServer: {
port: 8080,
hot: true,
proxy: {
'/': {
target: 'http://localhost:8888',
secure: false,
prependPath: false
}
},
contentBase: [path.join(__dirname, '/src/assets'), path.join(__dirname, '/public')],
publicPath: 'http://localhost:8080/',
historyApiFallback: true
}
};
webpack.dev.js
const webpack = require('webpack');
const merge = require('webpack-merge');
const common = require('./webpack.config.js');
module.exports = merge(common, {
mode: 'development',
devtool: 'cheap-module-eval-source-map',
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('development'),
},
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
],
});
webpack.prod.js
const webpack = require('webpack');
const merge = require('webpack-merge');
const common = require('./webpack.config.js');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
module.exports = merge(common, {
devtool: 'source-map',
mode: 'production',
cache: false,
plugins: [
new webpack.DefinePlugin({
'process.env': {
// Useful to reduce the size of client-side libraries, e.g. react
NODE_ENV: JSON.stringify('production'),
},
}),
new UglifyJSPlugin({
sourceMap: true
}),
]
});
关于为什么会发生这种情况的任何想法或想法吗？
答案 0 :(得分：3)
plugins: [require('@babel/plugin-proposal-class-properties')]
应该是
plugins: ['@babel/plugin-proposal-class-properties']
或
plugins: [require('@babel/plugin-proposal-class-properties').default]
否则，Babel在通过Webpack配置进行配置时将无法正确处理。