React脚手架中使用装饰器报Support for the experimental syntax ‘decorators-legacy‘ isn‘t currently enabled错误

Support for the experimental syntax ‘decorators-legacy’ isn’t currently enabled 错误

我在使用装饰器语法对react-redux中connect()方法使用进行简化的时候发现，我们利用create-react-app脚手架搭建的react脚手架项目直接使用装饰器会报"Support for the experimental syntax ‘decorators-legacy’ isn’t currently enabled"的错误，意思就是当前未启用装饰器的用法，也就是我们没有安装支持装饰器的插件。

一. 如果我们的项目已经由git管理

• 我们需要先运行 npm run eject ，将package.json里的东西完全暴露出来
  (如果直接运行项目可能会报错，我们需要先将我们项目当前的node_modules文件夹删除，之后重新install我们的项目，也就是npm install )。
• 接着在package.json文件下找到bebel属性：

  "babel": {
    "presets": [
      "react-app"
    ]
  }

增加下面配置：

 "plugins": [
      [
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
        }
      ]
    ]

• 然后重新运行项目，此时不支持装饰器的问题应该已经解决。

二. 如果我们只是本地项目，在运行完npm run eject命令后会报错：

Remove untracked files, stash or commit any changes, and try again.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! react-test@0.1.0 eject: `react-scripts eject`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the react-test@0.1.0 eject script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

主要问题是脚手架添加了.gitgnore文件，但是却没有本地仓库，我们需要将我们的项目添加到本地仓库，用git打开项目文件夹，然后运行以下命令：

git init
git add .
git commit -m 'Saving before ejecting'

接着我们运行npm run eject应该就会成功，然后进行第一步的操作，配置之后，就可以正常使用装饰器了。