The problem with react mobx using decorator has been resolved (resolved)

babel-plugin-transform-decorators-legacy is installed and
error message is configured in .babelrc

clipboard.png

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 reactreactesjs

            }
      },  
      {
        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 ? "-sharpeval-source-map" : "false"
})

.babelrc

{
    "plugins": ["transform-decorators-legacy","transform-class-properties"]
}
Jul.06,2021
Menu