React 16.x折騰記 - (5) 記錄用React開發項目過程遇到的問題(Webpack4/React16/antd等)

時間 2019-11-06

標籤 react 16.x 折騰記錄開發項目過程遇到問題 webpack4 webpack react16 antd 欄目 React 简体版

原文原文鏈接

前言

本身搭的腳手架,坑都是一步一步踩完的;javascript

技術棧: react@16.6.0/ react-router-dom@v4 / webpack^4.23.1(babel7+)css

閒話很少說,直入主題,有興趣的能夠瞧瞧,沒興趣的止步,節約您的時間.html

問題列表

問題一:`history`模式下,接口和請求衝突的問題

就是反向映射接口和請求的根路徑重疊,以下:java

proxy: {
            '/': {
                target: 'http://192.168.31.100/api/web',
                changeOrigin: true,
                secure: false,
            }
        },

複製代碼

這樣映射會形成路由尋址不到,這個問題我遇到的時候,浪費了挺多時間,最後發現仍是有解的;node

網上大多數人的寫法就是,加個prefix(聚合一個前綴),而後用pathRewrite重寫請求路徑react

proxy: {
            '/api': {
                target: 'http://192.168.31.100/api/web',
                changeOrigin: true,
                secure: false,
                pathRewrite: { '^/api': '/' },
            }
        },
        historyApiFallback: true 

複製代碼

可這法子,不大適合我這邊...能不能重疊又不影響,webpack

翻了一些Stack Overflow上的問答和文檔,發現仍是有的.ios

下面的寫法就是先判斷是html請求仍是其餘請求,如果請求html則不反向代理git

proxy: {
            '/': {
                target: 'http://192.168.31.100/api/web',
                changeOrigin: true,
                secure: false,
                // pathRewrite: { '^/api': '/' },
                bypass: function(req, res, proxyOptions) {
                    if (req.headers.accept.indexOf('html') !== -1) {
                        console.log('Skipping proxy for browser request.');
                        return '/index.html';
                    }
                }
            }
        },
        historyApiFallback: true 

複製代碼

問題二: 如何非`ts`下支持裝飾器 , 以及常規的語法解析

由於用了mobx,實在不想用高階函數的寫法(一堆括號)。github

我是直接配置babelrc的. 跟隨最新babel 7,裝上這個依賴便可支持

@babel/plugin-proposal-decorators -- 裝飾器支持
@babel/plugin-syntax-dynamic-import -- 動態引入相關代碼,適用於代碼分離
babel/plugin-proposal-object-rest-spread -- ...的支持
@babel/plugin-proposal-class-properties -- class支持
babel-plugin-import -- 阿里出品的css 按需加載
react-hot-loader/babel -- 配置react-hot-loader會用到

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": [
            "last 3 versions",
            "safari >= 7"
          ]
        },
        "modules": false,
        "debug": false,
        "useBuiltIns": "usage"
      }
    ],
    "@babel/preset-react"
  ],
  "plugins": [
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    [
      "@babel/plugin-proposal-class-properties",
      {
        "loose": true
      }
    ],
    "@babel/plugin-proposal-object-rest-spread",
    [
      "import",
      {
        "libraryName": "antd",
        "libraryDirectory": "es",
        "style": "css"
      }
    ],
    "@babel/plugin-syntax-dynamic-import",
    "react-hot-loader/babel"
  ]
}

複製代碼

問題三: `mobx`實現路由基礎鑑權

model

import { observable, action, computed, toJS } from 'mobx';
import API from 'services';  // axios的封裝

class AuthModel {
    constructor() {}

    // 登陸請求
    @action
    requestLogin = async values => {
        // 登陸接口
        const data = await API.post('/admin/login', values);
        const AuthUserData = JSON.stringify(data);
        window.localStorage.setItem('AuthUserData', AuthUserData);
        window.location.href = '/';
    };

    // 退出登陸
    @action
    requestLogout = async values => {
        this.UserData = {}; // 重置爲空對象
        this.isPermission = false;
        window.localStorage.removeItem('AuthUserData');
        window.location.href = '/entrance/login';
    };

    @computed
    get isAuthenticated() {
        if (window.localStorage.getItem('AuthUserData')) {
            if (JSON.parse(window.localStorage.getItem('AuthUserData')).token) {
                return true;
            }
            return false;
        } else {
            return false;
        }
    }
}

const Auth = new AuthModel();

export default Auth;


複製代碼

在對應的入口引入,結合react-route-dom的switch跳轉

import React, { Component } from 'react';
import { hot } from 'react-hot-loader';
import DevTools from 'mobx-react-devtools';
import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom';
import { observer, inject } from 'mobx-react';
import './App.css';
import ErrorBoundary from 'components/ErrorBoundary/ErrorBoundary';
import asyncComponent from 'components/asyncComponent/asyncComponent';

// 登陸註冊找回密碼
const Entrance = asyncComponent(() => import('pages/Entrance/Entrance'));

// 管理後臺
import AdminLayout from 'pages/Layout/AdminLayout';

@inject('auth')
@observer
export class App extends Component {
    constructor(props) {
        super(props);
    }
    componentDidMount = () => {};

    render() {
        const { isAuthenticated } = this.props.auth;
        return (
            <ErrorBoundary>
                <BrowserRouter>
                    <div>
                        <Switch>
                            <Route
                                path="/entrance"
                                render={() =>
                                    isAuthenticated ? (
                                        <Redirect exact to="/" />
                                    ) : (
                                        <Entrance />
                                    )
                                }
                            />
                            <Route
                                path="/"
                                render={() =>
                                    isAuthenticated ? (
                                        <AdminLayout />
                                    ) : (
                                        <Redirect exact to="/entrance" />
                                    )
                                }
                            />
                        </Switch>
                        {/**這裏是開啓了開發模式下顯示mobx的devtool*/}
                        {process.env.NODE_ENV === 'development' ? (
                            <DevTools />
                        ) : null}
                    </div>
                </BrowserRouter>
            </ErrorBoundary>
        );
    }
}

// react-hot-loader v4的寫法
export default hot(module)(App);


複製代碼

問題四: 加快開發模式下的編譯,以及常規的美化輸出

用了happypack來加快了js,css的編譯速度(多進程)，給css也開啓了tree shaking

我這個項目沒有引入less或sass,用styled-components@4來寫樣式

webpack.base.config.js

const webpack = require('webpack');
const path = require('path');

// 終端輸出進度條
const WebpackBar = require('webpackbar');

// html模板
const HtmlWebpackPlugin = require('html-webpack-plugin');

// css 抽離
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

// 多進程編譯
const HappyPack = require('happypack');
const os = require('os');
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });

// 給腳本預添加信息
const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');

// css tree shaking

const glob = require('glob');
const PurifyCSSPlugin = require('purifycss-webpack');

// 顯示編譯時間
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
const chalk = require('chalk');

const config = {
    entry: [path.resolve(__dirname, '../src')],
    resolve: {
        extensions: ['.js', '.jsx'],
        modules: [path.resolve(__dirname, '../src'), 'node_modules'],
        alias: {
            store: path.resolve(__dirname, '..', 'src/store'),
            transition: path.resolve(__dirname, '..', 'src/transition'),
            components: path.resolve(__dirname, '..', 'src/components'),
            utils: path.resolve(__dirname, '..', 'src/utils'),
            pages: path.resolve(__dirname, '..', 'src/pages'),
            views: path.resolve(__dirname, '..', 'src/views'),
            services: path.resolve(__dirname, '..', 'src/services'),
            assets: path.resolve(__dirname, '..', 'src/assets'),
            router: path.resolve(__dirname, '..', 'src/router')
        }
    },
    performance: {
        hints: false
    },
    plugins: [
        // 顯示打包時間
        new ProgressBarPlugin({
            format:
                ' build [:bar] ' +
                chalk.green.bold(':percent') +
                ' (:elapsed seconds)'
        }),
        // css tree shaking
        new PurifyCSSPlugin({
            // 路勁掃描 nodejs內置 路勁檢查
            paths: glob.sync(path.join(__dirname, 'pages/*/*.html'))
        }),
        // 進度條
        new WebpackBar(),
        // 定製全局變量
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
        }),
        // 生成引用一個或多個出口文件的html，須要生成多少個 html 就 new 多少此該插件
        new HtmlWebpackPlugin({
            // 沒有引入模板時的默認title，favicon也同樣，但filename除外
            title: 'index',
            favicon: path.resolve(__dirname, '../public/favicon.png'),
            // 定義插入到文檔哪一個節點，默認在body倒數位置
            inject: 'body',
            filename: 'index.html',
            template: path.resolve(__dirname, '../public/index.html'),
            // 壓縮html文件
            // 詳細的配置 https://github.com/kangax/html-minifier#options-quick-reference
            minify:
                process.env.NODE_ENV === 'production'
                    ? {
                          removeComments: true,
                          collapseWhitespace: true,
                          removeRedundantAttributes: true,
                          useShortDoctype: true,
                          removeEmptyAttributes: true,
                          removeStyleLinkTypeAttributes: true,
                          keepClosingSlash: true,
                          minifyJS: true,
                          minifyCSS: true,
                          minifyURLs: true
                      }
                    : {},
            // 在js文件後面加上一段hash碼，默認爲false
            hash: true
        }),
        new HappyPack({
            id: 'js',
            threadPool: happyThreadPool,
            loaders: ['babel-loader?cacheDirectory=true']
        }),
        new HappyPack({
            id: 'css',
            threadPool: happyThreadPool,
            loaders: [
                {
                    loader: 'css-loader',
                    options: {
                        importLoaders: 1 // 0 => 無 loader(默認); 1 => postcss-loader; 2 => postcss-loader, sass-loader
                    }
                },
                'postcss-loader'
            ]
        }),
        new MiniCssExtractPlugin({
            // Options similar to the same options in webpackOptions.output
            // both options are optional
            filename:
                process.env.NODE_ENV !== 'production'
                    ? 'static/css/[name].css'
                    : 'static/css/[name].[hash].css',
            chunkFilename:
                process.env.NODE_ENV !== 'production'
                    ? 'static/css/[id].css'
                    : 'static/css/[id].[hash].css'
        })
    ],
    module: {
        rules: [
            {
                test: /\.js$/,
                include: [path.resolve(__dirname, '../src')],
                exclude: /node_modules/,
                use: 'happypack/loader?id=js'
            },
            {
                test: /\.css$/,
                loaders: [
                    'style-loader',
                    // {
                    // loader: 'css-loader',
                    // options: {
                    // importLoaders: 1 // 0 => 無 loader(默認); 1 => postcss-loader; 2 => postcss-loader, sass-loader
                    // }
                    // },
                    // 'postcss-loader'
                    'happypack/loader?id=css'
                ]
            },
            {
                test: /\.json$/,
                loader: 'file-loader',
                options: {
                    name: 'json/[name].[ext]',
                    outputPath: 'static'
                }
            },
            {
                test: /\.(jpe?g|png|gif)(\?.*)?$/,
                include: [path.resolve(__dirname, '../src/assets/')],
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '/images/[name].[ext]?[hash]',
                            outputPath: 'static'
                        }
                    }
                ]
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: 'fonts/[name].[ext]',
                            outputPath: 'static'
                        }
                    }
                ]
            }
        ]
    }
};

module.exports = config;
複製代碼

效果圖以下

問題五: 用新的`getDerivedStateFromProps`取代`componentWillReceiveProps`?

新的寫法是組合寫法,如果只用這個靜態方法有時候會形成無限循環渲染,致使堆棧溢出

一旦用了static getDerivedStateFromProps(nextProps, prevState) ,必須返回一個值,

如果不更新state,那就返回null;

有時候在這裏返回新的state不夠嚴謹,這時候就要結合componentDidUpdate來變得更可控

componentDidUpdate = (prevProps, prevState, snapshot) 這個生命週期的第三個參數

是用來捕獲更新前的state(其實就是getDerivedStateFromProps返回的)

問題六: `antd`上傳組件結合`axios`上傳失敗

這個問題挺坑的，antd官方文檔說了能夠設置header, header爲form-data就掛了(默認就是這個提交格式)

最終axios裏面還要過濾下,在請求攔截器裏面

// 產生一個基於 axios 的新實例
const api = axios.create({
    baseURL: process.env.NODE_ENV === 'development' ? isDev : isProd, // 接口根路徑
    timeout: 5000, // 超時時間
    withCredentials: true, // 是否跨站點訪問控制請求,攜帶 cookie
    responseType: 'json', // 響應數據格式
    headers: {
        // 設置請求頭cd
        'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
    }
});

// http請求攔截器
api.interceptors.request.use(
    config => {
        // 請求開始，藍色過渡滾動條開始出現
        NProgress.start();
        if (window.localStorage.getItem('AuthUserData')) {
            let token =
                '不給你看 ' +
                JSON.parse(window.localStorage.getItem('AuthUserData')).token;
            config.headers.Authorization = token;
        }

        if (
            config.method === 'post' ||
            config.method === 'put' ||
            config.method === 'patch'
        ) {
            // 這段就是問答的解決所在,識別爲該格式的數據,不用`qs`編碼,直接提交
            if (config.headers['Content-Type'] === 'multipart/form-data') {
                return config;
            }

            // 如果須要對接口的字段進行序列化則可使用一個迷你庫
            // 在最頂部引入`qs`,序列化提交的數據
            config.data = qs.stringify(config.data);
        }
        return config;
    },
    error => {
        message.error(error);
        Promise.reject(error);
    }
);

複製代碼

問題七: `Antd`及moment默認全局中文注入

import React, {
    StrictMode,
    unstable_ConcurrentMode as ConcurrentMode
} from 'react';
import ReactDOM from 'react-dom';
import App from 'App';

// mobx 注入
import { Provider } from 'mobx-react'; // react mobx的耦合器
import RootStore from 'store/store';

// 全局中文
import { LocaleProvider } from 'antd';
import zh_CN from 'antd/lib/locale-provider/zh_CN';
import 'moment/locale/zh-cn';


ReactDOM.render(
    <Provider {...RootStore}> <LocaleProvider locale={zh_CN}> <App /> </LocaleProvider> </Provider>,
    document.getElementById('root')
);

複製代碼