记一次在create-react-app手脚架的拓展(移动端)

前言

这是我在掘金第一篇文章，有写得很差之处请多多见谅

开篇

我平时的技术栈是vue，最近在react的时候发现基于create-react-app搭建的项目有很多坑(react大佬请绕路，纯粹是咱们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