7、react按需加载、装饰器配置

1、react按需加载、装饰器配置

使⽤第三⽅组件antd 

npm install antd --save

import React, { Component } from 'react'
import Button from 'antd/lib/button'
import "antd/dist/antd.css"
class App extends Component {
 render() {
 return (
 <div className="App">
 <Button type="primary">Button</Button>
 </div>
 )
 }
}
export default App

2、配置按需加载，装饰器

根⽬录创建config-overrides.js，一定要是根⽬录创建config-overrides名

npm install react-app-rewired customize-cra babel-plugin-import -D   按需加载

npm install -D @babel/plugin-proposal-decorators     装饰器

需要修改package.json并重启

"scripts": {

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

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

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

    "eject": "react-app-rewired eject"

  },

如有装饰器错误提示可以参照该博客操作：https://blog.csdn.net/qq_41576643/article/details/107933394

 

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


module.exports = override(
 fixBabelImports("import", {//antd按需加载 libraryName: "antd",
    libraryName: "antd",
    libraryDirectory: "es",
    style: "css"
 }),
 addDecoratorsLegacy(),//配置装饰器
);