javascript - 模块构建失败 : SyntaxError: Missing class properties transform when using 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

你是不是忘了install it ？

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

顺便说一句，如果你使用 .babelrc，你不需要在 webpack 中配置 babel-loader 选项。
所以你可以删除它:

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