React 项目中使用 antd 组件库开发移动端项目 自定义 webpack 配置

前言

Create React App 是一个用于学习 React 的舒适环境，也是用 React 创建新的单页应用的最佳方式。

Ant Design 是一套企业级 UI 设计语言和 React 组件库。基于「自然」、「确定性」、「意义感」、「生长性」四大设计价值观，通过模块化解决方案，降低冗余的生产成本，让设计者专注于更好的用户体验。

Ant Design Pro
是一个企业级中后台前端/设计解决方案。
Ant Design Mobile
是 Ant Design 的移动规范的 React 实现，服务于蚂蚁及口碑无线业务。

antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。它的特性：

• 提炼自企业级中后台产品的交互语言和视觉风格。
• 开箱即用的高质量 React 组件。
• 使用 TypeScript 开发，提供完整的类型定义文件。
• 全链路开发和设计工具体系。
• 数十个国际化语言支持。
• 深入每个细节的主题定制能力。

接下来，我们来看怎样在 React 项目中使用 antd 开发移动端项目，并且完成自定义 webpack 配置。

1. 创建 react 项目

使用 create-react-app 脚手架，可以快速创建一个 react 单页面项目，自动创建的项目是基于webpack + ES6。在终端中执行下面的命令，即可快速创建一个react 项目。
npm install -g create-react-app my-app

国内使用 npm 速度很慢，在终端执行下面的命令，可以将npm镜像切换为淘宝镜像，再进行 npm install 安装
npm config set registry http://registry.npm.taobao.org/

不想全局安装的话，也可以使用npx命令，在终端中执行以下命令，./ 表示在当前目录下创建 react 项目，版本要求： Node >= 8.10 和 npm >= 5.6。
npx create-react-app ./

安装成功后，执行npm start即可启动项目。
在浏览器中打开 http://localhost:3000/ ，看到下面这个页面，则说明项目创建成功了。

2. 直接安装并引入 antd

在终端中执行下面的命令，安装 antd
npm install antd-mobile --save

修改 src/App.js 文件，引入 antd 的按钮组件。

import React from 'react';
import {
      Button } from 'antd-mobile';
import './App.css';

const App = () => (
  <div className="App">
    <Button type="primary">Button</Button>
  </div>
);

export default App;

修改 src/App.css，在文件顶部引入 antd-mobile.css 文件

import 'antd-mobile/dist/antd-mobile.css';  
// or 'antd-mobile/dist/antd-mobile.less'

重新启动项目，可以看到页面上已经有了 antd-mobile 的蓝色按钮组件，接下来就可以继续选用其他组件开发应用了。

3. 高级配置

上面的操作在实际开发中还有一些优化的空间，比如无法进行主题配置，而且上面的例子加载了全部的 antd 组件的样式（gzipped 后一共大约 60kb）。

如果我们需要对 create-react-app 的默认配置进行自定义，这里我们使用 react-app-rewired （一个对 create-react-app 进行自定义配置的社区解决方案）。

引入 react-app-rewired 并修改 package.json 里的启动配置。由于新的 [email protected] 版本的关系，你还需要安装 customize-cra。

3.1 安装 react-app-rewired customize-cra

在终端中执行下面的命令，安装 react-app-rewired customize-cra
yarn add react-app-rewired customize-cra -D

3.2 修改 package.json 文件

修改package.json文件对应内容

/* package.json */
"scripts": {
     
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test",
+   "test": "react-app-rewired test",
}

3.3 创建 config-overrides.js 配置文件

在项目根目录下创建 config-overrides.js 配置文件，用于修改 webpack 配置项。

const {
     override} = require("customize-cra");

module.exports = function override(config, env) {
     
  // do stuff with the webpack config...
  return config;
};

做完上述操作后，执行 npm start 或者 yarn start ，检查项目是否能够正常启动。

3.4 安装 antd-mobile UI库

终端中执行下面的命令，安装 antd-mobile UI库
yarn add antd-mobile -S

按需加载要使用的模块，并引入样式文件

import React from 'react';
import {
     Button} from 'antd-mobile';
import 'antd-mobile/dist/antd-mobile.css'

const App = () => (
  <div className="App">
    <Button type="primary">Button</Button>
  </div>
);

export default App;

3.5 配置别名

webpack 中配置别名，修改 config-overrides.js 配置文件的内容如下：

const {
     override,addWebpackAlias} = require("customize-cra");
const path = require("path");

module.exports = override( 
  addWebpackAlias({
     
    ["assets"]: path.resolve(__dirname, "./src/assets/")
  })
);

点击查看
关于 customize-cra 的更多用法（如修改 webpack 更多配置项）。

3.6 配置代理

进行 Mock 数据的时候，可能会需要配置代理，我们使用 http-proxy-middleware 插件来完成这个功能。终端中执行下面的命令，安装 http-proxy-middleware 插件：
yarn add http-proxy-middleware -D

然后在 src目录下新建 setupProxy.js 配置文件，并进行相关的配置：

/* setupProxy.js */
const {
     createProxyMiddleware} = require('http-proxy-middleware')

module.exports =function(app){
     
	app.use('/api',createProxyMiddleware(
		{
     
			target:"http://localhost:3033/",
			changeOrigin: true,
			pathRewrite:{
     '/api':''}
		})
	)
}

3.7 使用 scss 样式

基于 creat-react-app 框架，使用 scss 语法，需要安装 node-sass，在终端中执行下面的命令，安装 node-sass
yarn add node-sass -S

安装完成后，不需要做额外的配置，可以直接引入 .scss 文件，react 底层会自动解析 scss 文件。

import './common.scss'

3.8 使用 Css-in-Js

在终端中执行下面的命令，安装 styled-components，使用 -S，作为开发依赖
yarn add styled-components -S

新建后缀为 .js 的样式文件，例如新建 HeaderBar.style.js 文件内容如下：

import styled from 'styled-components'
import searchIcon from 'assets/images/search.png' //导入图片

const HeaderBarContainer=styled.div`
	background:url(${
       searchIcon}) left center no-repeat;
    line-height:0.9rem;
    text-align:center;
    font-size:0.4rem;
`
export {
     HeaderBarContainer}

在组件中使用：

import React, {
      Component } from 'react'
import ReactDOM from 'react-dom'
import {
     HeaderBarContainer} from './HeaderBar.style'

class HeaderBar extends Component {
     
    render() {
     
        return (
            <HeaderBarContainer>标题内容</HeaderBarContainer>
        )
    }
}

ReactDOM.render(
    <HeaderBar />,
  document.getElementById('root')
);

需要注意的是：

• styled-components 插件，不能跟 postcss 同时使用，也就是不能自动将 px 单位转成 rem 或者 vw；
• 在样式组件里直接写图片路径是解析不了的，需要使用 import 先导入图片再写入 url 里，导入时会将图片解析成 Base64 图片编码；

React 项目中使用 antd 组件库开发移动端项目，在项目中自定义 webpack 配置，就先写这么多，以后用到别的内容再来更新。