react mobx 使用装饰器问题已解决（已解决）

Question

babel-plugin-transform-decorators-legacy 已经安装，并在.babelrc里配置了
报错信息

store/countStore.js

import { observable, action, computed, runInAction, autorun, extendObservable } from 'mobx';
class CountStore {
   @observable num = 0;
   constructor(){
     
   }
}

export default CountStore;

components/index.jsx

import React, { Component } from 'react';
import { render } from 'react-dom';
import Bottom from './index/bottom';
import Bodys from './index/bodys';
import Top from './index/top';
import CountStore from '../store/countStore';
const CountStores  = new CountStore();
var arr=[1,2,3,4];
var arrs=[{
    a:"d"
},
{
    a:"b"
}]
class Index extends Component {
    constructor(props){
        super(props);
    }
    render(){
        return <div id="index">
        <div>123132</div>
            <Top id="top" kkk={arr}  dataid={arrs}></Top>
            <Bodys id="bodys" countstore="{CountStores}">744855</Bodys>
            <Bottom id="bottom">213213</Bottom>
        </div>
    }

}



export default Index;

components/index/bodys.jsx

import React, { Component } from 'react';
import { render } from 'react-dom';
import { observer } from 'mobx-react';
@observer
class Bodys extends Component {
    constructor(props){
        super(props);
    }
    render(){
        return <div>
            <div>我是中间</div>
            <div>{this.props.countstore.num}</div>
        </div>
    }
}

export default Bodys;

package.json

{
  "name": "webpack-react",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --inline --hot --env.dev",
    "build": "rimraf dist && webpack -p --progress --hide-modules"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autodll-webpack-plugin": "^0.3.9",
    "autoprefixer": "^6.6.0",
    "babel-core": "^6.24.1",
    "babel-loader": "^6.4.0",
    "babel-plugin-component": "^1.1.1",
    "babel-plugin-syntax-async-functions": "^6.13.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.5",
    "babel-plugin-transform-es2015-modules-amd": "^6.24.1",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-preset-vue-app": "^1.2.0",
    "babel-runtime": "^6.26.0",
    "copy-webpack-plugin": "^4.5.2",
    "cross-env": "^1.0.8",
    "css-loader": "^0.27.0",
    "file-loader": "^0.10.1",
    "html-webpack-plugin": "^2.24.1",
    "imagemin-webpack-plugin": "^2.2.0",
    "jsx-loader": "^0.13.2",
    "less": "^2.7.2",
    "less-loader": "2.2.3",
    "postcss-cssnext": "^3.1.0",
    "postcss-import": "^11.1.0",
    "postcss-loader": "^1.3.3",
    "rimraf": "^2.5.4",
    "style-loader": "^0.13.2",
    "url-loader": "^0.5.8",
    "webpack": "^3.1.2",
    "webpack-dev-server": "^2.4.2"
  },
  "dependencies": {
    "axios": "^0.15.3",
    "base64-url": "^2.2.0",
    "clipboard": "^2.0.0",
    "echarts": "^4.0.4",
    "echarts-wordcloud": "^1.1.3",
    "es6-promise": "^4.2.4",
    "js-base64": "^2.4.3",
    "jsonp": "^0.2.1",
    "lodash": "^4.17.10",
    "mobx": "^2.6.0",
    "mobx-react": "^3.5.8",
    "prop-types": "^15.6.1",
    "qs": "^6.5.1",
    "react": "^15.3.1",
    "react-dom": "^15.3.1",
    "sortablejs": "^1.6.1",
    "wangeditor": "^3.1.1"
  }
}

webpack.config.js

const resolve = require('path').resolve
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const url = require('url')
const publicPath = '/dist/'
const ImageminPlugin = require('imagemin-webpack-plugin').default;
const CopyWebpackPlugin = require('copy-webpack-plugin').default;
const AutoDllPlugin = require('autodll-webpack-plugin');
module.exports = (options = {}) => ({
  entry: {
    vendor: ['react','react-dom'],
    app: './src/app.js'
 
  },
  output: {
    path: resolve(__dirname, 'dist'),
    filename: options.dev ? '[name].js' : '[name].[chunkhash].js',
    chunkFilename: options.dev ? '[id].js' : '[id].[chunkhash].js' ,
    publicPath: options.dev ? '/' : publicPath
  },
  module: {
    rules: [
       {
            test: /\.js[x]?$/,
            exclude: /node_modules/,
            loader: 'babel-loader?presets[]=env&presets[]=react',
            options: {
              presets: ['es2015',  'stage-0', 'react'],  //babel presets ，首先需要react解析react然后再es语法编译成js

            }
      },  
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'postcss-loader']
      },
      {
        test: /\.less$/,
        use:[
            "style-loader",
            "css-loader",
            "less-loader",
        ]
      },
      {
        test: /\.(png|jpg|jpeg|gif|eot|ttf|woff|woff2|svg|svgz)(\?.+)?$/,
        use: [{
          loader: 'url-loader',
          options: {
            limit: 10000
          }
        }]
      }
    ]
  },
  plugins: [
    // new webpack.optimize.CommonsChunkPlugin({
    //   name:'common',
    //   minChunks: 3,
    //   chunks: ['common','app']
    // }),
    new webpack.optimize.CommonsChunkPlugin({
      name:'vendor',
      minChunks: Infinity,
      chunks: ['vendor']
    }),
    // new AutoDllPlugin({
    //   filename: '[name].[hash].js', 
    //   path: '/',
    //   inject:true,
    //   entry: {
    //     vendor: ['react','react-dom']
    //   },
    //   plugins: [
    //     new webpack.optimize.UglifyJsPlugin({
    //       // 最紧凑的输出
    //       beautify: false,
    //       // 删除所有的注释
    //       comments: false,
    //       compress: {
    //         // 在UglifyJs删除没有用到的代码时不输出警告  
    //         warnings: false,
    //         // 删除所有的 `console` 语句
    //         // 还可以兼容ie浏览器
    //         drop_console: true,
    //         // 内嵌定义了但是只用到一次的变量
    //         collapse_vars: true,
    //         // 提取出出现多次但是没有定义成变量去引用的静态值
    //         reduce_vars: true
    //       }
    //     })
    //   ]
    // }),
    new HtmlWebpackPlugin({
      template: 'src/index.tpl',
      filename: 'index.html',
      chunks:['vendor','app']
    }),
    new webpack.optimize.UglifyJsPlugin({
      // 最紧凑的输出
      beautify: false,
      // 删除所有的注释
      comments: false,
      compress: {
        // 在UglifyJs删除没有用到的代码时不输出警告  
        warnings: false,
        // 删除所有的 `console` 语句
        // 还可以兼容ie浏览器
        drop_console: true,
        // 内嵌定义了但是只用到一次的变量
        collapse_vars: true,
        // 提取出出现多次但是没有定义成变量去引用的静态值
        reduce_vars: true
      }
    }),
  
    new CopyWebpackPlugin([{
      from: '*/image/'
    }]),
    new ImageminPlugin({
      disable:options.dev ? true : false, 
      pngquant: {
        quality: '80'
      },
      jpegtran:{
        progressive: true
      },
      test: /\.(jpe?g|png|gif|svg)$/i
    }),
    new webpack.DefinePlugin({
      ISDEV:options.dev ? true : false
    })
 
  ],
  resolve: {
    alias: {
      '~': resolve(__dirname, 'src')
    },
    extensions: ['.js', '.jsx', '.json', '.css']
  },
  devServer: {
    host: '127.0.0.1',
    port: 1010,
    publicPath:"/",
    proxy: {
      '/api/': {
        target: 'http://127.0.0.1:8080',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },
    hot: true,
    watchOptions: {
      aggregateTimeout: 30,
      poll: 300
    }
  },
  devtool: options.dev ? '#eval-source-map' : 'false'
})

.babelrc

{
    "plugins": ["transform-decorators-legacy","transform-class-properties"]
}