create-react-app按需引入antd-mobile

1.引入 react-app-rewired 并修改 package.json 里的启动配置:

npm i react-app-rewired@2.0.2-next.0   // 需要安装低版本 否则npm start 会报错The "injectBabelPlugin" helper has been deprecated as of v2.0.

2.更改package,json文件的“script”内容为

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

　　

3.安装babel-plugin-import, babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件

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

 

4..在项目根目录创建一个 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
}

 

5.完成配置按需引入

import React, { Component } from 'react';
import { Button } from 'antd-mobile';

class App extends Component {
  render() {
    return (
      <div className="App">
         <Button type='primary'>按钮</Button>
      </div>
    );
  }
}

export default App;

效果如下：