详解create-react-app 2.0版本如何启用装饰器语法

yarn add react-app-rewired

2

3

4

5

"scripts": {

  "start": "react-app-rewired start",

  "build": "react-app-rewired build",

  "test": "react-app-rewired test"

 }

yarn add @babel/plugin-proposal-decorators metro-react-native-babel-preset -D

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

// .babelrc

{

 "presets": ["module:metro-react-native-babel-preset"],

 "plugins": [

  [

   "@babel/plugin-proposal-decorators",

   {

    "legacy": true

   }

  ]

 ]

}

// config-overrides

const { getBabelLoader } = require(‘react-app-rewired‘);

const path = require(‘path‘);

module.exports = function override(config, env) {

 const babelLoader = getBabelLoader(config.module.rules);

 const pwd = path.resolve();

 babelLoader.include = [path.normalize(`${pwd}/src`)];

 // use babelrc

 babelLoader.options.babelrc = true;

 return config;

};

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

{

 "name": "my-react-project",

 "version": "0.1.0",

 "private": true,

 "dependencies": {

  "react": "^16.5.2",

  "react-app-rewired": "^1.6.2",

  "react-dom": "^16.5.2",

  "react-scripts": "2.0.5"

 },

 "scripts": {

  "start": "react-app-rewired start",

  "build": "react-app-rewired build",

  "test": "react-app-rewired test"

 },

 "eslintConfig": {

  "extends": "react-app"

 },

 "browserslist": [

  ">0.2%",

  "not dead",

  "not ie <= 11",

  "not op_mini all"

 ],

 "devDependencies": {

  "@babel/plugin-proposal-decorators": "^7.1.2",

  "metro-react-native-babel-preset": "^0.48.1",

  "webpack-bundle-analyzer": "^3.0.3"

 }

}