基于create-react-app 适配移动端方案

开篇

我平时的技术栈是vue，最近在react的时候发现基于create-react-app搭建的项目有不少坑(react大佬请绕路)，首先公司如果没有固定的手脚架的话就需要自己搭建项目，npm各种的库，难免会耗不少时间，以下是我搭建的经历（坑）

安装基本react依赖库

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

有关webpack选项的自定义

我选择的是react-app-rewired + customize-cra

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

customize-cra的更多用法

然后将package.json中的scripts改成以下：

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

在根目录新建一个config-overrides.js文件，写入代码

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

关于适配

我使用的是postcss-px-to-viewport进行设置适配（px装换成vw） npm代码我就不写了，额... npm装以下的包：

 "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"
  },

在根目录新建postcss.config.js文件 加入一下代码：

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,
    },
};

postcss-px-to-viewport更多的用法

注意：低版本的android手机存在不支持vw的方法，如果需要考虑低版本的手机网上有垫片方案

然后我们在配置刚刚新建的config-overrides.js文件

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

可以看到我是通过引入postcss.config.js，然后遍历对象导入有关postcss的配置项，后期如果需要加postcss的插件，在postcss.config.js增加即可。

增加修饰符的支持

npm @babel/plugin-proposal-decorators

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

然后修改config-overrides.js文件，改成以下:

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

绝对路径问题

相信用过vue-cli的小伙伴都知道，vue-cli为我们设置了别名@：src，于是我们再设置一下别名：

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

和webpack相关的配置结束了，开始我对react项目的配置，仅供参考，不一步步说了，上代码:

router和App.js

文件：routes/router
import Home from "../views/Home/index";
export const mainRouter = [
    {
        path: '/home',
        component: Home,
    }
];
文件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;

redux和reducers

文件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)
    ),
);

文件reducers/index
import {combineReducers} from "redux";
//注意：combineReducers 传递不能空的对象
export const appReducer = combineReducers({
});

文件action/index
// 写的你的action

经过一系列操作后，文件目录长这样

配合antd-mobile

用法看官网，复制黏贴 以下是效果

可以看到px已经自动转vw了

结束

深夜发文，感谢大家浏览，github地址 github.com/lgkang/reac…

希望大家多多star