React项目引入antd-mobile并配置按需加载

在项目根目录：

cnpm install antd-mobile --save
cnpm install react-app-rewired customize-cra --save-dev
cnpm install babel-plugin-import --save-dev
cnpm install react-scripts --save

确保完整安装以上几个

 

打开项目根目录的package.json，

把

  "scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js",
  },

改为

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

 

在项目根目录新建config-overrides.js，添加以下内容：

const { override, fixBabelImports } = require('customize-cra');
module.exports = override(
  fixBabelImports(
    'import', 
    {
      libraryName: 'antd-mobile',
      style: 'css'
    }
  ),
);

 

使用组件：

import { Button } from 'antd-mobile'
<Button type='primary'>按钮</Button>