MobX 是一個簡單、方便擴充套件、久經考驗的狀態管理解決方案。使用了觀察者(observable)與被觀察者(observer)的概念，本人不介紹MobX的使用(本人也在努力研究之中)，僅僅是介紹webpack配置轉碼ES7的裝飾器的寫法.

一、package.json檔案

在之前的webpack支援ES6的基礎上新增安裝三個外掛
"babel-plugin-transform-decorators": "^6.22.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-stage-1": "^6.22.0",

{
  "name": "es6",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --inline --host localhost --port 3000"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core
 
": "^6.22.1",
    "babel-loader": "^6.2.10",
    "babel-plugin-transform-decorators": "^6.22.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.23.0",
    "babel-preset-stage-1": "^6.22.0",
    "react": "^15.4.2",
    "react-dom
 
": "^15.4.2",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.4.2"
  }
}

二、在webpack.config.js檔案中配置外掛

module.exports = {
    entry:{
        index:'./index.js'
    },
    output: {
        path: __dirname,
        filename: "[name].build.js",
    },
    module:{
        loaders:[
            {
                test: /\.(js|jsx)$/,
                exclude:"/node_modules/",
                loader: 'babel-loader' ,
                query: {
                    presets: ['es2015','react','stage-1'],
                    plugins: ['transform-decorators-legacy','transform-decorators']
                }
            }
        ]
    },
    resolve:{
        extensions:['.js',".css",".jsx"]
    }
}

三、執行阮一峰老師上的程式碼

function testable(target) {
    target.isTestable = true;
}

@testable
class MyTestableClass {}

console.log(MyTestableClass.isTestable)