react笔记——脚手架实现对antd组件库实现按需引入

最新推荐文章于 2024-08-07 09:10:36 发布

努力码代码

最新推荐文章于 2024-08-07 09:10:36 发布

阅读量667

点赞数

分类专栏： react js

本文链接：https://blog.csdn.net/qq_38557281/article/details/100558124

版权

本文介绍如何在已有React脚手架项目中，通过安装和配置babel-plugin-import，实现对antd-mobile组件库的按需引入和打包。详细步骤包括安装依赖、修改package.json、创建config-overrides.js文件，从而优化项目体积，提高加载速度。

摘要由CSDN通过智能技术生成

首先，你需要一个react脚手架项目，可以自己创建，在这基础之上，引入antd-mobile（手机端）

npm install antd-mobile --save

接下来，在页面中引入你需要的组件，进行使用

import React, {Component} from 'react'
import {Button,Toast} from 'antd-mobile'
export default class App extends Component{

    handleClick = () => {
        Toast.info('提交成功')
    }

    render(){
        return (
            <div>
                <Button type='primary' onClick={this.handleClick}>提交</Button>
            </div>
        )
    }
}

接下来，开始按需打包步骤，主要使用babel-plugin-import（推荐）。

1.下载依赖包

npm install react-app-rewired@2.0.2-next.0 --save-dev