使用 vscode 開發(fā) mobx 搭配的 react 項目蔫慧，es7 的 Decorators 預(yù)定義語法報錯
使用 mobx 時匣缘，通過修飾符 observer 將組建變成響應(yīng)式組建時蚓土，或定義需要關(guān)注的對象的其他情況時，會有報錯的情況
@observer
class App extends Component { ... }
[js] Experimental support for decorators is a feature that is subject to change in a future release
vscode 會有波紋下劃線的報錯提醒忆首，但是 webpack 能編譯通過
這時候忠藤，可以在項目根目錄創(chuàng)建 jsconfig.json，內(nèi)容為
{
"compilerOptions": {
"experimentalDecorators": true,
"emitDecoratorMetadata": true
}
}
ok路幸，報錯消除
使用 create-react-app 開發(fā) mobx 項目時荐开，編譯的報錯
由于預(yù)置的腳手架環(huán)境不支持 decorators 裝飾模式，需要手動配置 babel plugin
先執(zhí)行 create-react-app 的 eject 指令來解除 cli 環(huán)境
$ 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
- 使用注入： 配置
