create-react-app 支持decorator

在create-react-app创建的项目中基本上配置文件都是生成好了的。但是默认配置并不支持修饰器。所以我们在使用@修饰器的时候会报错编译不通过。此时我们需要增加一个依赖来支持修饰器语法。

方法一

一、暴露出 create-react-app 的所有配置

$ npm run eject

二、配置插件

在 package.json 文件中找到 babel 的配置，添加如下代码即可：

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

重新运行项目，即可正常使用装饰器语法。

create-react-app 脚手架中已经安装了 @babel/plugin-proposal-decorators 插件.
如果是自己配置的脚手架，请先安装插件

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

方法二(覆写webpack的配置文件)

在package.json 的同级目录下创建 config-overrides.js 文件
内容如下：

const { override, addDecoratorsLegacy } = require("customize-cra");
module.exports = override(addDecoratorsLegacy());