使用 mobx 遇到的一些问题

使用 vscode 开发 mobx 搭配的 react 项目，es7 的 Decorators 预定义语法报错

使用 mobx 时，通过修饰符 observer 将组建变成响应式组建时，或定义需要关注的对象的其他情况时，会有报错的情况

@observer
class App extends Component { ... }

[js] Experimental support for decorators is a feature that is subject to change in a future release

vscode 会有波纹下划线的报错提醒，但是 webpack 能编译通过

这时候，可以在项目根目录创建 jsconfig.json，内容为

{
    "compilerOptions": {
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true
    }
}

ok，报错消除

使用 create-react-app 开发 mobx 项目时，编译的报错

由于预置的脚手架环境不支持 decorators 装饰模式，需要手动配置 babel plugin

先执行 create-react-app 的 eject 指令来解除 cli 环境

$ npm run eject

安装装饰器支持

$ npm i --save-dev babel-plugin-transform-decorators-legacy

然后修改根目录下的 package.json (create-react-app 版本 1.3.3)

找到 babel 的配置对象增加插件

"babel": {
  "presets": [
    "react-app"
  ],
  "plugins": [
    "transform-decorators-legacy"
  ]
}

然后 $ npm run start 测试下就好

也有其他情况，譬如有自建的 .babelrc 或者不使用修饰符的情况

参照 如何(不)使用装饰器

补充：

• 不使用注入： react-app-rewired
• 使用注入： 配置