create-react-app 中配置 babel-plugin-import 实现 antd 按需加载功能

鉴于 antd 官方文档使用 babel-plugin-import描述不够清楚,故写此文记录具体配置步骤。

1、npm run eject

在项目根路径下打开命令行,运行

npm run eject

如果使用了git,请确保执行此命令前没有未提交的内容
运行完毕后项目路径下会多出configscripts文件夹,此外package.json 的内容也会发生改变,其中包括新增的babel节点。

2、修改 package.json 配置

package.json中的babel节点添加plugins子节点,具体如下

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

再次启动项目,此时无需在代码中引入antd/dist/antd.css,按钮也可正常显示

import React, { Component } from "react";
import { Button } from "antd";
// 配置了按需加载就不需要了
// import "antd/dist/antd.css";
class AntdDemo extends Component {
  render() {
    return (
      <div>
        <Button type="primary">
          Button
        </Button>
      </div>
    );
  }
}

export default AntdDemo;

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容