React 项目中使用 antd 组件库开发移动端项目 自定义 webpack 配置 |
您所在的位置：网站首页 › 手机端组件库在哪里找到 › React 项目中使用 antd 组件库开发移动端项目 自定义 webpack 配置 |
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/ ，看到下面这个页面，则说明项目创建成功了。 在终端中执行下面的命令，安装 antd npm install antd-mobile --save 修改 src/App.js 文件，引入 antd 的按钮组件。 import React from 'react'; import { Button } from 'antd-mobile'; import './App.css'; const App = () => ( Button ); 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 = () => ( Button ); 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 ( 标题内容 ) } } ReactDOM.render( , document.getElementById('root') );需要注意的是： styled-components 插件，不能跟 postcss 同时使用，也就是不能自动将 px 单位转成 rem 或者 vw；在样式组件里直接写图片路径是解析不了的，需要使用 import 先导入图片再写入 url 里，导入时会将图片解析成 Base64 图片编码；React 项目中使用 antd 组件库开发移动端项目，在项目中自定义 webpack 配置，就先写这么多，以后用到别的内容再来更新。 |
【本文地址】