react17解决项目支持装饰器

小鱼儿 2023-01-08 14:28 114阅读 0赞

先使用 `npm run eject` 暴露配置

安装以下依赖

"devDependencies": { 
        "@babel/plugin-proposal-decorators": "^7.12.12",
        "babel-plugin-import": "^1.13.3",
        "customize-cra": "^1.0.0",
        "react-app-rewired": "^2.1.8"
      }

修改 babel 配置

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

根目录下新建 config-overrides.js

const { 
      override,
      addDecoratorsLegacy,
      disableEsLint,
      addBundleVisualizer,
      addWebpackAlias,
      adjustWorkbox
    } = require("customize-cra");
    const path = require("path");
    
    module.exports = override(
      // enable legacy decorators babel plugin
      addDecoratorsLegacy(),
    
      // disable eslint in webpack
      disableEsLint(),
    
      // add webpack bundle visualizer if BUNDLE_VISUALIZE flag is enabled
      process.env.BUNDLE_VISUALIZE === 1 && addBundleVisualizer(),
    
      // add an alias for "ag-grid-react" imports
      addWebpackAlias({ 
        "ag-grid-react$": path.resolve(__dirname, "src/shared/agGridWrapper.js")
      }),
    
      // adjust the underlying workbox
      adjustWorkbox(wb =>
        Object.assign(wb, { 
          skipWaiting: true,
          exclude: (wb.exclude || []).concat("index.html")
        })
      )
    );

中途如果报错  
![在这里插入图片描述][20210124202053306.png]执行命令

npm install --save react-scripts

修改 scripts

"scripts": { 
        "start": "react-app-rewired start",
        "build": "react-app-rewired build",
        "test": "react-app-rewired test --env=jsdom"
      }

之后就可以重启项目了。  
![在这里插入图片描述][20210120144205306.gif_pic_center]

[20210124202053306.png]: /images/20221119/475d800d4e074d1e9118f3944aa3ce05.png
[20210120144205306.gif_pic_center]: /images/20221119/64b57be6d11d44a9b4ca5f122ada6dc1.png