React-MobX错误:'decorators'插件需要'decoratorsBeforeExport'选项,其值必须是布尔值

Question

我收到以下错误:如果您要从Babylon/Babel 6迁移或想要使用旧的装饰器提议,则应使用'decorators-legacy'插件而不是'decorators'.

的package.json

"@babel/plugin-proposal-decorators": {
      "version": "7.1.2",
      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.1.2.tgz",
      "integrity": "sha512-YooynBO6PmBgHvAd0fl5e5Tq/a0pEC6RqF62ouafme8FzdIVH41Mz/u1dn8fFVm4jzEJ+g/MsOxouwybJPuP8Q==",
      "requires": {
        "@babel/helper-plugin-utils": "^7.0.0",
        "@babel/helper-replace-supers": "^7.1.0",
        "@babel/helper-split-export-declaration": "^7.0.0",
        "@babel/plugin-syntax-decorators": "^7.1.0"
      }
    },

 "@babel/plugin-syntax-decorators": {
      "version": "7.1.0",
      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.1.0.tgz",
      "integrity": "sha512-uQvRSbgQ0nQg3jsmIixXXDCgSpkBolJ9X7NYThMKCcjvE8dN2uWJUzTUNNAeuKOjARTd+wUQV0ztXpgunZYKzQ==",
      "requires": {
        "@babel/helper-plugin-utils": "^7.0.0"
      }
    },

"babel-plugin-syntax-decorators": {
      "version": "6.13.0",
      "resolved": "http://registry.npmjs.org/babel-plugin-syntax-decorators/-/babel-plugin-syntax-decorators-6.13.0.tgz",
      "integrity": "sha1-MSVjtNvePMgGzuPkFszurd0RrAs=",
      "dev": true
    },
    "babel-plugin-transform-decorators-legacy": {
      "version": "1.3.5",
      "resolved": "https://registry.npmjs.org/babel-plugin-transform-decorators-legacy/-/babel-plugin-transform-decorators-legacy-1.3.5.tgz",
      "integrity": "sha512-jYHwjzRXRelYQ1uGm353zNzf3QmtdCfvJbuYTZ4gKveK7M9H1fs3a5AKdY1JUDl0z97E30ukORW1dzhWvsabtA==",
      "dev": true,
      "requires": {
        "babel-plugin-syntax-decorators": "^6.1.18",
        "babel-runtime": "^6.2.0",
        "babel-template": "^6.3.0"
      }
    },
"requires": {
     "@babel/plugin-proposal-decorators": "7.1.2",
}

tsconfig.json

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

Answer 1

错误消息有点令人困惑,但是通过一些深入的搜索,您可以使用以下方法解决它.

除了您在本指南中使用webpack之外,我不做任何假设.

您需要将babel建议装饰器添加到您的dev依赖项(您只需要在开发时间内)(您已经添加).

如果使用纱线

yarn add --dev @babel/plugin-proposal-decorators 

另外,对于npm

npm install --save-dev @babel/plugin-proposal-decorators 

然后在你的package.json文件中,找到babel config部分或添加一个(如果不存在).配置名称严格来说是"babel".

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

如果手动输入,请特别注意缩进.请注意,对象"@babel/plugin-proposal-decorators"深层嵌套在两个数组中,因此必须这样才能工作.

只是为了进行健全性检查,你的devDependencies至少会如此

  "devDependencies": {
    "@babel/plugin-proposal-decorators": "^7.1.2"
  }

现在,您可以使用纱线或npm构建应用程序,并且从此过上幸福的生活.