The opening

My usual technology stack is VUE. Recently, when I was in React, I found that there were a lot of problems with create-React-app projects. First, if the company didn’t have a fixed scaffolding, it would have to build projects by itself.

Install the basic React dependency library

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

Customization of webpack options

I chose React-app-rewired + customize-cra

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

More uses of customize-cra

Then change scripts in package.json 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 the code

Create a new config-overrides. Js file in the root directory and write the code

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

About the adapter

I’m going to use postcss-px-to-viewPort to set the NPM. NPM contains the following packages:

 "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 the code

Create a new postcss.config.js file in the root directory and add the following 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 the code

Postcss-px-to-viewport More usage

Note: There are ways to not support VW on older Versions of Android phones. If you need to consider a shim solution on the Internet for older versions of Android phones

Then we configure 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 the code

As you can see, I imported postcss.config.js, and then iterated through the object to import configuration items about PostCSS. If you need to add a postCSS plug-in later, you can add it in postcss.config.js.

Added support for modifiers

npm @babel/plugin-proposal-decorators

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

Then modify the config-overrides. Js file as follows:

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 the code

Absolute path problem

Vue-cli = @: SRC SRC = @src SRC = @src SRC = @src SRC = @src SRC = @src SRC = @src SRC = @src SRC = @src SRC = @src SRC = @src SRC

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 the code

React configuration: Webpack configuration: Webpack configuration: WebPack configuration

The router and App. Js

File: routes/routerimport Home from ".. /views/Home/index";
export const mainRouter = [
    {
        path: '/home'.component: Home, } ]; The file App. Jsimport 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 the code

Story and reducers

The file store. Jsimport {createStore, applyMiddleware, compose} from "redux";
import thunk from "redux-thunk";
import {appReducer} from "./reducers";

export conststore = createStore( appReducer, compose( applyMiddleware(thunk) ), ); File reducers/indeximport {combineReducers} from "redux";
// Note: combineReducers pass objects that cannot be empty
export constappReducer = combineReducers({ }); File action/index// Write your action
Copy the code

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

Cooperate with antd – mobile

Use to see the official website, copy and paste the following is the effect

You can see that px has been automatically converted to VW

The end of the

Late at night post, thank you for browsing, github address github.com/lgkang/reac…

Hope you have more star