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

首先，你需要一个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 (
            

                提交
            
        )
    }
}

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

1.下载依赖包

npm install [email protected]  --save-dev

npm install babel-plugin-import --save-dev

（react-app-rewired如果不是2.0版本，react-scripts 升级到 2.1.2 以后破坏了 react-app-rewired，react-app-rewired的新版本删除所有方法injectBabelPlugin，这些方法被移动到一个名为'customize-cra'的新包中了）

解决方法如下：https://blog.csdn.net/zoepriselife316/article/details/88063171

2.修改package.json文件

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test --env=jsdom"
}

3.添加一个文件：config-overrides.js

const {injectBabelPlugin} = require('react-app-rewired');
module.exports = function override(config, env) {
    config = injectBabelPlugin(['import', {libraryName: 'antd-mobile', style: 'css'}], config);
    return config;
};

然后，就可以重新启动项目，实现按需打包。