mobx前期配置工作让webpack支持ES7的修饰器的转码

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)