27.ant-design-mobile使用入门

• 27.ant-design-mobile使用入门
  • 1.实现按需打包(组件js/css)

1.实现按需打包(组件js/css)

1)      下载依赖包

yarn addreact-app-rewired --dev
yarn addbabel-plugin-import --dev
# 或者
npm install react-app-rewired babel-plugin-import customize-cra --save-dev
// 由于新的 react-app-rewired@2.x 版本的关系，我们还需要安装 customize-cra

2)      修改默认配置:

• package.json

"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",
  })
);

3)      编码

// import 'antd-mobile/dist/antd-mobile.css'

// import Button from 'antd-mobile/lib/button'
// import Toast from 'antd-mobile/lib/toast'

import React from 'react'
import ReactDOM from 'react-dom'
import {Button} from 'antd-mobile'

ReactDOM.render(
	<Button type='primary'>学习</Button>,
	document.getElementById('root')
)