create-react-app 构建的项目使用 mobx ,说到底就是为了使用装饰器语法对 babel 做些配置

在 create-react-app 命令行构建的 React 项目中使用 Mobx 会出现如下警告:

Support for the experimental syntax 'decorators-legacy' isn't currently enabled (9:5):

需要启用 ESNext 的装饰器 (命令行中执行 mac 端)

  1. 先 git add .
  2. git commit -am "Save before ejecting" (然后(注意这里是 am)
  3. npm run eject
  4. npm install --save-dev babel-plugin-transform-decorators-legacy (安装该模块中间可能有告警自行消除即可)
  5. npm install --save-dev @babel/plugin-proposal-decorators
  6. npm install --save-dev @babel/plugin-proposal-class-properties
  7. 在 package.json 里修改 babel 如下所示
"babel": {
  "plugins":[
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy":true
      }
    ],
    [
      "@babel/plugin-proposal-class-properties",
      {
        "loose":true
      }
    ]
  ],
  "presets":[
    "react-app"
  ]
},

按照以上步骤就可以开心的使用 Mobx