React 元件封裝 以及常用項記錄

rabZhang發表於2020-03-10
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…

相關文章