React 组件封装 以及常用项记录

React CRA项目常见目录

📂app 
   📂node_modules //依赖模块
   📂public //静态文件
   📂src  //资源
      📂api //公司项目常用api入口
      📂assets //项目静态资源文件夹 里面放img  /  style  / 第三方js  / 字体文件
      📂components //项目公共组件库
      📂router  //路由
      📂store  //状态管理
      📂utils //项目公共封装库 rem.js  数据请求等等
      📂views/pages //表示项目的路由对应的组件目录
      📂layout //容器入口
      📂XXX_framework //公共组件库
      🔴App.css //主页入口样式
      🔴App.js  //主页入口js
      🔴App.test.js
      🔴index.js //主入口js
      🔴logo.svg //图标
      🔴seriveWorker.js
      🔴setupProxy.js //配置反向代理
      🔴setupTest.js
      
   🔴.gitignore
   🔴config-overrides.js//配置路径别名
   🔴package.json //项目依赖
   🔴README.md //项目介绍
   🔴yarn.lock //版本锁定

快速上手ant design

mobile.ant.design/docs/react/… 这个是官方配置说明文档

$ npm install -g create-react-app

# 注意：工具会自动初始化一个脚手架并安装 React 项目的各种必要依赖，如果在过程中出现网络问题，请尝试配置代理或使用其他 npm registry。
$ create-react-app my-app

$ cd my-app
$ npm start

引入 antd-mobile
$ npm install antd-mobile --save
这里我们使用yarn锁版本而不是npm
yarn add antd-mobile -D

按需加载
引入 react-app-rewired 并修改 package.json 里的启动配置。。由于新的 react-app-rewired@2.x 版本的关系，你需要还需要安装 customize-cra。

$ npm install react-app-rewired customize-cra --save-dev
这里我们还使用yarn 
yarn add react-app-rewired customize-cra -S -D

/* package.json */ 替换webpack配置项
"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test --env=jsdom",
+   "test": "react-app-rewired test --env=jsdom",
}

使用 babel-plugin-import, babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件（原理），现在我们尝试安装它并修改 config-overrides.js 文件。

npm install babel-plugin-import --save-dev
还是使用yarn add  babel-plugin-import -S -D


//替换 config-overrides.js
+ const { override, fixBabelImports } = require('customize-cra');

- module.exports = function override(config, env) {
-   // do stuff with the webpack config...
-   return config;
- };
+ module.exports = override(
+   fixBabelImports('import', {
+     libraryName: 'antd-mobile',
+     style: 'css',
+   }),
+ );

更改引用方式

- import Button from 'antd-mobile/lib/button';
+ import { Button } from 'antd-mobile';

config-overrides.js

常用示例样本

const {
	override,
	fixBabelImports,
	addWebpackAlias  
} = require('customize-cra'); //npm  customize-cra 查看手册
const path = require('path')

function pathFn(pathUrl) {
	return path.join(__dirname, pathUrl)
}

module.exports = override(
	fixBabelImports('import', { //引入样式
		libraryName: 'antd-mobile',
		style: 'css',
	}),
	addWebpackAlias({
		//别名：目录绝对路径  使用目录的名称
		'@': pathFn('./src'),
		'assets': pathFn('./src/assets'),
		'components': pathFn('./src/components'),
		'router': pathFn('./src/router'),
		'utils': pathFn('./src/utils'),
		'views': pathFn('./src/views'),
		'store': pathFn('./src/store')
	})
);

setupProxy.js

yarn add http-proxy-middleware -s //下载依赖中间件

/*配置反向代理*/

const {
	createProxyMiddleware
} = require('http-proxy-middleware') //引入中间件 npm看手册

module.exports = function(app) {
	/*
		//app.use(proxy(标识符，反向代理配置))
		*标识符选取域名后的第一个路径
	*/
	app.use(createProxyMiddleware(
		'/ajax', {
			target: 'http://m.maoyan.com', //请求路径
			changeOrigin: true //使用我们当前的http://localhost:3000来代替目标源
		}
	))

	app.use(createProxyMiddleware(
		'index.php', {
			target: 'http://www.qinqin.net',
			changeOrigin: true
		}
	))
}

SASS配置

$ yarn add node-sass sass-loader -D //如果node-sass 安装失败 yarn config set sass-binary-site npm.taobao.org/mirrors/nod…