react 中引入 ant-design

像山里的风

于 2021-12-28 18:10:31 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/qq_42905523/article/details/122198922

本文介绍了如何在React项目中引入Ant Design框架，包括全局安装和按需加载两种方式。对于按需加载，详细说明了手动按需加载以及通过babel-plugin-import实现自动按需加载的步骤，涉及到npm run eject命令的使用以及对webpack配置的修改。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

react 中引入 ant-design

一. 安装
在这里插入图片描述
二. 引入
1.全局引入

2. 按需加载
①手动按需加载

②使用 babel-plugin-import 按需加载
（1）运行 npm run eject 暴露出webpack的配置文件，项目会多出config和scripts文件夹
问题：关于文件被修改了，无法运行 npm run eject 命令，删除.git文件
（2）运行 cnpm install babel-plugin-import --save ，安装babel按需加载依赖
（3）在package.json添加以下配置

"babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "import",
        {
          "libraryName": "antd",
          "libraryDirectory": "es",
          "style": "css"
        }
      ]
    ]
  }