BabelLoaderError：語法錯誤：缺少類屬性變換

Question

獲得以下消息時，我嘗試運行我的dev的服務器：

BabelLoaderError: SyntaxError: Missing class properties transform.

我已經安裝了類的屬性通天插件，你可以看到，和我已經把它變成我的.babelrc文件：

.babelrc

{ "presets": ["es2015", "stage-2"], 
    "plugins": ["transform-class-properties"] 
} 

但仍不會渲染。如果我刪除這個ES6箭頭功能 - add = (a, b) => a + b - 它完美呈現，但類屬性插件似乎並沒有解決它...

如果任何人都可以發現哪裏出了問題，將不勝感激。

的package.json

{ 
    "name": "judo-heroes", 
    "version": "1.0.0", 
    "description": "Simple application to showcase how to achieve universal rendering and routing with React and Express.", 
    "main": "src/server.js", 
    "repository": "git@github.com:lmammino/judo-heroes.git", 
    "scripts": { 
    "start": "NODE_ENV=production node_modules/.bin/babel-node --presets 'react,es2015' src/server.js", 
    "start-dev": "npm run start-dev-hmr", 
    "start-dev-single-page": "node_modules/.bin/http-server src/static", 
    "start-dev-hmr": "node_modules/.bin/webpack-dev-server --progress --inline --hot", 
    "build": "NODE_ENV=production node_modules/.bin/webpack -p" 
    }, 
    "author": "Luciano Mammino", 
    "license": "MIT", 
    "dependencies": { 
    "babel-cli": "^6.11.4", 
    "babel-core": "^6.13.2", 
    "babel-loader": "^6.2.5", 
    "babel-plugin-react-html-attrs": "^2.0.0", 
    "babel-plugin-transform-es2015-arrow-functions": "^6.8.0", 
    "babel-preset-es2015": "^6.13.2", 
    "babel-preset-react": "^6.11.1", 
    "babel-preset-react-hmre": "^1.1.1", 
    "ejs": "^2.5.1", 
    "express": "^4.14.0", 
    "react": "^15.3.1", 
    "react-dom": "^15.3.1", 
    "react-redux": "^4.4.5", 
    "react-router": "^2.6.1", 
    "redux": "^3.6.0" 
    }, 
    "devDependencies": { 
    "babel-plugin-transform-class-properties": "^6.18.0", 
    "babel-preset-es2015": "^6.18.0", 
    "babel-preset-stage-2": "^6.18.0", 
    "http-server": "^0.9.0", 
    "react-hot-loader": "^1.3.0", 
    "webpack": "^1.13.2", 
    "webpack-dev-server": "^1.14.1" 
    } 
} 

webpack.config.js

"use strict"; 

const debug = process.env.NODE_ENV !== "production"; 

const webpack = require('webpack'); 
const path = require('path'); 

module.exports = { 
    devtool: debug ? 'inline-sourcemap' : null, 
    entry: path.join(__dirname, 'src', 'app-client.js'), 
    devServer: { 
    inline: true, 
    port: 3333, 
    contentBase: "src/static/", 
    historyApiFallback: { 
     index: '/index-static.html' 
    } 
    }, 
    output: { 
    path: path.join(__dirname, 'src', 'static', 'js'), 
    publicPath: "/js/", 
    filename: 'bundle.js' 
    }, 
    module: { 
    loaders: [{ 
     test: path.join(__dirname, 'src'), 
     loader: ['babel-loader'], 
     query: { 
     cacheDirectory: 'babel_cache', 
     presets: debug ? ['react', 'es2015', 'react-hmre'] : ['react', 'es2015'] 
     } 
    }] 
    }, 
    plugins: debug ? [] : [ 
    new webpack.DefinePlugin({ 
     'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV) 
    }), 
    new webpack.optimize.DedupePlugin(), 
    new webpack.optimize.OccurenceOrderPlugin(), 
    new webpack.optimize.UglifyJsPlugin({ 
     compress: { warnings: false }, 
     mangle: true, 
     sourcemap: false, 
     beautify: false, 
     dead_code: true 
    }), 
    ] 
}; 

Answer 1

好吧，我想通了。我需要包括這在我.babelrc文件：

{ "presets": ["es2015"] } 

還有，我需要這在我webpack.config.js（特別是stage-2部分）：

presets: debug ? ['react', 'es2015', 'stage-2', 'react-hmre'] : ['react', 'es2015', 'stage-2'] 

另外請注意，我發現預設聲明的順序非常重要。

希望這可以幫助任何面臨類似問題的人。