從零搭建webpack4+react+typescript+eslint腳手架(六)

本篇是前文的擴展延伸。

美化webpack輸出信息

webpack在開發時的輸出信息有一大堆，可能會干擾我們查看信息，以下提供一個美化、精簡輸出信息的建議。

精簡以下開發服務器輸出信息，修改webpack.dev.js：

// ...webpack configs
stats: {
  colors: true,
  children: false,
  chunks: false,
  chunkModules: false,
  modules: false,
  builtAt: false,
  entrypoints: false,
  assets: false,
  version: false
}

美化一下打包輸出，安裝依賴：

$ npm i -D ora chalk

修改config/build.js：

const ora = require('ora');
const chalk = require('chalk'); // 如果要改變輸出信息的顏色，使用這個，本例沒有用到
const webpack = require('webpack');
const webpackConfig = require('./webpack.prod');

const spinner = ora('webpack編譯開始...\n').start();

webpack(webpackConfig, function (err, stats) {
  if (err) {
    spinner.fail('編譯失敗');
    console.log(err);
    return;
  }
  spinner.succeed('編譯結束!\n');

  process.stdout.write(stats.toString({
    colors: true,
    modules: false,
    children: false,
    chunks: false,
    chunkModules: false
  }) + '\n\n');
});

分別運行打包和開發命令，控制檯界面是不是清爽多了？

路由的配置

本段提供一個react-router的實踐。

安裝依賴：

$ npm i react-router-dom react-router-config @types/react-router-dom @types/react-router-config
$ npm i @loadable/component

新建src/router.ts：

import loadable from '@loadable/component'; // 按需加載

export const basename = ''; // 如果訪問路徑有二級目錄，則需要配置這個值，如首頁地址爲'http://tianzhen.tech/blog/home'，則這裏配置爲'/blog'

export const routes = [
  {
    path: '/',
    exact: true,
    component: loadable(() => import('@/pages/demo/HelloWorldDemo/HelloWorldDemoPage')), // 組件需要你自己準備
    name: 'home', // 自定義屬性
    title: 'react-home' // 自定義屬性
    // 這裏可以擴展一些自定義的屬性
  },
  {
    path: '/home',
    exact: true,
    component: loadable(() => import('@/pages/demo/HelloWorldDemo/HelloWorldDemoPage')),
    name: 'home',
    title: 'HelloWorld'
  },
  // 404 Not Found
  {
    path: '*',
    exact: true,
    component: loadable(() => import('@/pages/demo/404Page/404Page')),
    name: '404',
    title: '404'
  }
];

改造index.tsc，啓用路由：

import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import { renderRoutes } from 'react-router-config';
import { routes, basename } from './router';
import '@/App.less';

const App: React.FC = () => {
  return <BrowserRouter basename={basename}>{renderRoutes(routes)}</BrowserRouter>;
};

export default App;

我們還可以利用路由爲每個頁面設置標題。

先寫一個hook：

import { useEffect } from 'react';

export function useDocTitle(title: string) {
  useEffect(() => {
    const originalTitle = document.title;
    document.title = title;
    return () => {
      document.title = originalTitle;
    };
  });
}

把hook應用在需要修改標題的組件中即可：

import React from 'react';
import { useDocTitle } from '@/utils/hooks/useDocTitle';

import Logo from './react-logo.svg';
import './HelloWorldDemoPage.less';

const HelloWorldDemoPage: React.FC<Routes> = (routes) => {
  const { route } = routes; // 獲取傳入的路由配置
  useDocTitle(route.title); // 修改標題
  return <div className="App">hello, world</div>;
};

export default HelloWorldDemoPage;