How to enable decorators for create-react-app

joephon commented 5 years ago

Dependencies

@babel/plugin-proposal-decorators
customize-cra
react-app-rewired

Step 1

yarn add -D @babel/plugin-proposal-decorators customize-cra  react-app-rewired

Step 2

create a file called config-overrides.js in your root dir

// config-overrides.js

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

module.exports = override(
    // enable legacy decorators babel plugin
    addDecoratorsLegacy()
)

Step 3

rewrite package.json file as well as below

// package.json

{
  ...
  "scripts": {
    - "start": "react-scripts start",
    - "build": "react-scripts build",
    - "test": "react-scripts test",
    + "start": "react-app-rewired start",    
    + "build": "react-app-rewired build",   
    + "test": "react-app-rewired test",     
    ...
  },
  ...
}

Bingo~

yarn start

function bingo() {}

@bingo
class Bingo {}

这篇文章价值一块钱

joephon commented 5 years ago

test comment

wardenger commented 5 years ago

这个我用antd的时候用到过，是按需加载跟自定义主题要用到？

joephon commented 5 years ago

@wardenger create react app 现在内置了按需加载了以前没用现在有另外这里只是配置下启用装饰器和主题和按需加载没关系

wardenger commented 5 years ago

我知道了，主要是对默认配置进行自定义，启用装饰器只是其中一个选择。

joephon commented 5 years ago

@wardenger 对，在不eject 的情况下把新的配置信息 hack 进 create react app 脚手架

joephon / blog