Mobile terminal adaptation scheme based on create react app

Lord Pippi 2021-09-15 10:22:19

The opening

My usual technology stack is vue, Recently react Based on create-react-app There are many pits in the project (react Please take a detour ), First of all, if the company does not have a fixed scaffold, it needs to build its own project ,npm Various libraries , It will inevitably take a lot of time , The following is my experience ( pit )

Installation basic react Dependency Library

npm i react-dom react-redux react-router-dom redux-thunk -S
 Copy code 

of webpack Customization of options

I chose react-app-rewired + customize-cra

npm install react-app-rewired customize-cra --save-dev
 Copy code 

customize-cra More use of

And then package.json Medium scripts Change to the following :

"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject"
}
 Copy code 

Create a new... In the root directory config-overrides.js file , Write code

const {override} = require("customize-cra");
module.exports = override();
 Copy code 

About adaptation

I'm using postcss-px-to-viewport Set the adaptation (px Replace with vw) npm I will not write the code , forehead ... npm Pack the following bags :

 "devDependencies": {
"cssnano": "^4.1.7",
"cssnano-preset-advanced": "^4.0.5",
"postcss-aspect-ratio-mini": "^1.0.1",
"postcss-cssnext": "^3.1.0",
"postcss-import": "^12.0.1",
"postcss-px-to-viewport": "^0.0.3",
"postcss-url": "^8.0.0",
"postcss-viewport-units": "^0.1.6",
"postcss-write-svg": "^3.0.1"
},
 Copy code 

Create a new directory in the root directory postcss.config.js file Add some code :

module.exports = {
"postcss-import": {},
"postcss-url": {},
"postcss-aspect-ratio-mini": {},
"postcss-write-svg": {utf8: false},
"postcss-cssnext": {},
"postcss-px-to-viewport": {
viewportWidth: 750 / 2, // (Number) The width of the viewport.
viewportHeight: 1334 / 2, // (Number) The height of the viewport.
unitPrecision: 3, // (Number) The decimal numbers to allow the REM units to grow to.
viewportUnit: "vw", // (String) Expected units.
selectorBlackList: [".ignore", ".hairlines"], // (Array) The selectors to ignore and leave as px.
minPixelValue: 1, // (Number) Set the minimum pixel value to replace.
mediaQuery: false, // (Boolean) Allow px to be converted in media queries.
},
"postcss-viewport-units": {},
"cssnano": {
"cssnano-preset-advanced": {
zindex: false,
autoprefixer: false,
},
// preset: 'advanced',
// autoprefixer: false,
// 'postcss-zindex': false,
},
};
 Copy code 

postcss-px-to-viewport More usage

Be careful : Low version of the android The mobile phone does not support vw Methods , If you need to consider a lower version of the mobile phone, there is a gasket scheme on the Internet

Then we are configuring the newly created config-overrides.js file

const {override, addPostcssPlugins} = require("customize-cra");
const postcss = require("./postcss.config.js");
// postcss Configuration item 
const postcssPlugin = Object.keys(postcss).map(key => require(key)(postcss[key]));
module.exports = override(
addPostcssPlugins(postcssPlugin),
);
 Copy code 

You can see that I introduced postcss.config.js, Then traverse the object and import information about postcss Configuration item for , If you need to add postcss Plug in for , stay postcss.config.js Just add .

Added modifier support

npm @babel/plugin-proposal-decorators

npm i @babel/plugin-proposal-decorators -S
 Copy code 

And then modify config-overrides.js file , Change to the following :

const {override, addPostcssPlugins, addDecoratorsLegacy} = require("customize-cra");
const postcss = require("./postcss.config.js");
// postcss Configuration item 
const postcssPlugin = Object.keys(postcss).map(key => require(key)(postcss[key]));
module.exports = override(
addPostcssPlugins(postcssPlugin),
addDecoratorsLegacy()
);
 Copy code 

Absolute path problem

I believe used vue-cli Everyone knows that ,vue-cli Set an alias for us @:src, So let's set another alias :

const {override, addPostcssPlugins, addDecoratorsLegacy, addWebpackAlias} = require("customize-cra");
const postcss = require("./postcss.config.js");
const path = require("path");
// postcss Configuration item 
const postcssPlugin = Object.keys(postcss).map(key => require(key)(postcss[key]));
module.exports = override(
addWebpackAlias({
"@": path.resolve(__dirname, "src"),
}),
addPostcssPlugins(postcssPlugin),
addDecoratorsLegacy()
);
 Copy code 

and webpack The related configuration is over , At first, I was right. react Project configuration , For reference only , No, step by step , Code up :

router and App.js

 file :routes/router
import Home from "../views/Home/index";
export const mainRouter = [
{
path: '/home',
component: Home,
}
];
file App.js
import React from "react";
import {HashRouter as Router, Switch, Route, Redirect} from "react-router-dom";
import {mainRouter} from "../routes/router";
import {Provider} from "react-redux";
import {store} from "../store";
function App() {
return (
<Provider store={store}> <Router> <Switch> { mainRouter.map(router => { return <Route path={router.path} key={router.path} component={router.component} exact/>; }) } </Switch> <Redirect to={mainRouter[0].path} from='/'/> </Router> </Provider>
);
}
export default App;
 Copy code 

redux and reducers

 file store.js
import {createStore, applyMiddleware, compose} from "redux";
import thunk from "redux-thunk";
import {appReducer} from "./reducers";
export const store = createStore(
appReducer,
compose(
applyMiddleware(thunk)
),
);
file reducers/index
import {combineReducers} from "redux";
// Be careful :combineReducers Cannot pass an empty object 
export const appReducer = combineReducers({
});
file action/index
// It's yours action
 Copy code 

After a series of operations , The file directory looks like this

coordination antd-mobile

See the official website for usage , Copy and paste Here are the results

You can see px Has been automatically transferred to vw 了

end

Late at night , Thank you for browsing ,github Address github.com/lgkang/reac…

I hope you all have more star

Please bring the original link to reprint ,thank
Similar articles

2021-09-15

2021-09-15

2021-09-15

2021-09-15