記一次在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