模块构建失败:SyntaxError:使用WebPack2时缺少类属性变换

Question

我正在为项目使用React，我正在从WebPack2迁移到WebPack3。在更新Babel和所有依赖项之后，我执行了npm run build，这导致错误：Module build failed: SyntaxError: Missing class properties transform.

错误的示例：

  11 |
  12 | class Login extends Component {
> 13 |     state = {
     |     ^
  14 |         email: "",
  15 |         password: ""
  16 |     }

另一个示例：

  11 | class Navigation extends React.Component {
  12 |
> 13 |     state = {
     |     ^
  14 |         loadingTotal: false,
  15 |     }

有人知道问题在哪里吗？我尝试搜索错误，但到目前为止我还没有找到任何解决方案...

.babelrc

{
  "presets": ["env", "stage-2", "react"],
  "plugins": [
    "react-hot-loader/babel",
    "transform-class-properties"
  ]
}

webpack.config

const webpack = require('webpack');
const WriteFilePlugin = require('write-file-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
const path = require('path');
const config = {
    entry: {
        'vendor': './dist/vendor',
        'app': [
            'react-hot-loader/patch',
            './app/index'
        ]
    },
    output: {
        path: process.env.WEBPACK_ENV === 'production' ? path.join(__dirname, '/../../../../public_html/') : path.join(__dirname, '/public'),
        filename: '[name].js',
        publicPath: '/'
    },
    resolve: {
        extensions: ['.ts', '.js', '.json']
    },
    module: {
        rules: [
            // { enforce: 'pre', test: /.js$/, exclude: /node_modules/, loader: 'eslint-loader' }
            {
                test: /.(js|jsx)?$/,
                exclude: /node_modules/,
                options: {
                    presets: ['env']
                },
                loader: 'babel-loader'
            },
            {test: /.json$/, loader: 'json-loader'},
            {test: /.html/, loader: 'html-loader'},
            {test: /.styl$/, loader: 'style-loader!css-loader!stylus-loader'},
            {test: /.css$/, loader: 'style-loader!css-loader'},
            {test: /.(gif|png|jpe?g)$/i, loader: 'file-loader?name=images/[name].[ext]'},
            {
                test: /.woff2?$/,
                loader: 'url-loader?name=fonts/[name].[ext]&limit=10000&mimetype=application/font-woff'
            },
            {test: /.(ttf|eot|svg)$/, loader: 'file-loader?name=fonts/[name].[ext]'}
        ]
    }
};
console.log(process.env.WEBPACK_ENV);
config.devtool = process.env.WEBPACK_ENV === 'production' ? 'source-map' : 'eval-source-map';
config.plugins = [
    new webpack.ProvidePlugin({
        '$': "jquery",
        'jQuery': "jquery",
        'window.jQuery': "jquery",
        'window.$': 'jquery'
    }),
    new webpack.DefinePlugin({
        'WEBPACK_ENV': process.env.WEBPACK_ENV === 'production' ? '"production"' : '"dev"'
    }),
    new ExtractTextPlugin("styles.css"),
    process.env.WEBPACK_ENV === 'production' ? new UglifyJSPlugin() : WriteFilePlugin()
]

module.exports = config;

构建命令：

    "NODE_ENV=production BABEL_ENV=production WEBPACK_ENV=production ./node_modules/.bin/webpack --config webpack.config.js",

Answer 1

您忘了安装它吗？

npm install --save-dev babel-plugin-transform-class-properties

，如果您使用的是.babelrc，则不需要在WebPack中配置Babel-Loader选项。
因此您可以删除此：

options: {
   presets: ['env']
},