使用 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
- 使用注入: 配置