React专题8: Ant Design 和按需引入(打包)(react-app-rewired)

AntUI是蚂蚁金服推出的一套前端页面组件封装的解决方案. 包括Ant Design(pc端)和Ant Design Mobile(移动端)两部分. 这里讨论Ant Design Mobile部分. Ant Design Mobile of React 官方地址

1. 快速使用

安装antd-mobile

npm install antd-mobile --save

入口页面 (html 或 模板) 相关设置

引入 FastClick 并且设置 html meta (更多参考 #576)
引入 Promise 的 fallback 支持 (部分安卓手机不支持 Promise)

使用

// 组件使用实例
import { Button } from 'antd-mobile';
ReactDOM.render(Start, mountNode);
// 引入样式
import 'antd-mobile/dist/antd-mobile.css';  // or 'antd-mobile/dist/antd-mobile.less'

2. 按需导入

安装以下依赖库

npm i react-app-rewired
npm i babel-plugin-import
npm i customize-cra

一些早期资料中使用的是 react-app-rewired 1.*版本，安装后，在项目根目录中新建文件config-overrides.js文件。即可操作了~

但是在 react-app-rewired2.* 以后，不再支持injectBabelPlugin的方式，需要安装customize-cra。

更改package.json

启动脚本由react-scripts 改为react-app-rewired

// 由
 "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

// 改为:
 "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  }

添加config-overrides.js文件

在package.json的同级目录下添加config-overrides.js文件

const {
    override,
    fixBabelImports
} = require('customize-cra');

module.exports = override(
    fixBabelImports("import", {
        libraryName: "antd-mobile", libraryDirectory: "es", style: 'css'
    }),
);

相关资料

node-sass

如果使用.scss后缀名的css文件, 需要安装 node-sass 才能编译