react配置antd按需加载

妖狐艹你老母 2023-01-18 14:24 310阅读 0赞

> **安装与全局引用**

*   安装

npm install antd --save

*  使用（以Button组件为例）

import React from 'react'
    import 'antd/dist/antd.css';
    
    class MyFirstComponent extends React.Component {
      state = {
        text: "Hello React",
        author: "欧阳"
      };
      /** 组件生命周期钩子函数：在组件挂载完成后立即被调用 */
      componentDidMount() {
        console.log("组件一挂载完成")
      }
      render() {
        const { text, author } = this.state
        return (
          <div>
            <h1>我是组件一</h1>
            <Button type="primary">sddsds</Button>
          </div>
        )
      }
    export default MyFirstComponent

只需要在用的时候引入整个antd.css即可

> **按需加载引用**

*  安装按需引入的插件

npm install  babel-plugin-import --save

*  在项目里找到**.babelrc**文件，并进行配置

{
      "plugins": [
        ["import", {
          "libraryName": "antd",
          "libraryDirectory": "es",
          "style": "css" // `style: true` 会加载 less 文件
        }]
      ]
    }

*  老衲猜测，看完了这段代码，你就去项目里找**.babelrc**文件了，然而你发现，压根就没有！！！surprise ？？？mother fuck???
 *  那么接下来，你肯定又想，项目里没有，那老衲自己去创建一个，如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70][]

*  然后你重启了一下项目，以为没什么问题了，然后打开项目，发现没啥卵用，按需引入没用，也不报错。surprise ？？？mother fuck???（注意哈，这一步本身是没错的 —— 自己创建此文件）

> **巨坑分析！！！**

react项目默认会不读取此文件，所以你的**.babelrc文件**设置被漠视了，不叼你

*  解决方案：
 *  找到如下文件：node\_modules => react-scripts => config => webpack.config.js

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 1][]

*  将此项修改成true，原来是false
 *  ok，然后再接着往下看

> **按需引入搞定**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 2][]

如果解决了你的问题，三连一波走起来！！！点赞关注收藏一波，感谢各位，会继续输出优质内容~

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70]: /images/20221021/3071c50545794a83a1ed2b3071693f84.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 1]: /images/20221021/fdaaf169d723481a836f2dc564aaf864.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 2]: /images/20221021/228b69a068664a14b4605850bb5d6dbc.png