react17添加装饰器和antd按需导入

说明原由

• 我的项目是通过cra 创建的默认所有的配置都是隐藏的 --可通过你npm run eject 暴露出所有的配置
• 在cra项目中添加装饰器功能，需修改相应的配置
  • 通过上述的方式暴露所有的配置去修改–这种方式不可逆，对于改动点比较多可以采用
  • 对于一些小的改动 ----杀猪焉用宰牛刀 ；使用customize-cra (意思是定制cra)
  • 安装customize-cra 和 react-app-rewired
  • npm install customize-cra react-app-rewired --save-dev
  • 因为是为了添加装饰器当然还有相应的插件
  • npm install @babel/plugin-proposal-decorators --save-dev
  • 说明下：我暴露了所有的配置在package.json 中修改相应的babel配置；当然你可以尝试***不暴露***试试看，我有点懒(^ _ ^)

首先安装以下依赖

• npm install xxxx --save-dev
• 版本号为我当前使用的最新版本

//package.json
 //引入 antd 样式文件，需要下载 babel-plugin-import
"devDependencies": {
    "@babel/plugin-proposal-decorators": "^7.15.4",
    "babel-plugin-import": "^1.13.3",
    "customize-cra": "^1.0.0",
    "react-app-rewired": "^2.1.8"
  }

• 你可能发下了我多了个babel-plugin-import 是为了下面的antd按需导入

修改 babel 相应配置

//package.json
"babel": {
    "plugins": [
      [
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
        }
      ]
    ],
    "presets": [
      "react-app"
    ]
  },
  "devDependencies": {
    "@babel/plugin-proposal-decorators": "^7.15.4",
    "babel-plugin-import": "^1.13.3",
    "customize-cra": "^1.0.0",
    "react-app-rewired": "^2.1.8"
  }

在根目录下新建 config-overrides.js

const {
    override,
    addDecoratorsLegacy,
    fixBabelImports,
    disableEsLint
  } = require("customize-cra");
  
  module.exports = override(
    // enable legacy decorators babel plugin
    addDecoratorsLegacy(),//配置装饰器
    fixBabelImports('import', {
        // antd按需加载
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: 'css' //或者true, true代表运用less
      }),
    // disable eslint in webpack
    disableEsLint(),
  );
  

• 如果使用 Less，需要下载 less 和 less-loader
• npm install less less-loader --save-dev
• 配置如下：

const {
  override,
  addDecoratorsLegacy,
  fixBabelImports,
  disableEsLint,
  addWebpackAlias,
  addLessLoader,
} = require("customize-cra");
const path = require("path");

module.exports = override(
  // enable legacy decorators babel plugin
  addDecoratorsLegacy(), //配置装饰器

  // disable eslint in webpack
  disableEsLint(), //取消eslint 校验

  // add an alias for "ag-grid-react" imports
  addWebpackAlias({
  //这是我项目的导入路径
    ["myRcFieldForm"]: path.resolve(
      __dirname,
      "src/components/my-rc-field-form"
    ),
    ["myRcForm"]: path.resolve(__dirname, "src/components/my-rc-form"),
  }),
  fixBabelImports("import", {
    // antd按需加载
    libraryName: "antd",
    libraryDirectory: "es",
    style: true, //"css"或者true, true代表运用less
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: {
      "@primary-color": "red",
      "@border-color-base": "green",
      "@link-color": "orange",
    },
  })
);

• 具体使用可以参考如下参考博客，不在此赘述了

修改 scripts

• package.json 中

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

尝试启动就好了

• npm run start or yarn start
• 可能有如下错误

internal/modules/cjs/loader.js:883
 throw err;
 ^

Error: Cannot find module 'customize-cra'

internal/modules/cjs/loader.js:883
  throw err;
  ^

Error: Cannot find module 'react-scripts/package.json'

那就再安装下，应该就好了

• npm install customize-cra --save-dev
• npm install react-scripts --save
  在此 感谢提供帮助的博主
  地址：参考的博主：react17解决项目支持装饰器
  地址：使用 customize-cra 修改 webpack 配置