React+Typescript項目踩踩坑坑

時間 2019-11-06

標籤 react+typescript react typescript 項目欄目 React 简体版

原文原文鏈接

前言

項目裏使用react 16.8.x, typescript 3.5.3
而後也用 koa2+typescript 搭了一個簡單的 api 後臺服務，只是用來驗證 Axios 封裝Api 的使用，還有我的 node.js 玩耍須要🙃，並不涉及數據庫操做等。。。代碼能夠戳這裏
順便升級了一下 webpack4
而後，這只是一個空模版，用來驗證一些東西，只有少數簡單 demo 頁面，其餘頁面都已刪除。。。
本文項目源碼能夠看這裏

更新：[2019-09-05]: electron，詳情看 github 分支： electron/electron-app

更新：[2019-09-09]: 第三方資源使用 CDN （看 1三、構建）

一、建立項目

這裏沒有使用antd官方的demo，而是在普通 react+typescript 項目增長 antd 而後改造的css

爲何不用antd官方的demo？ 由於我試過了以後能夠用，可是webpack設置別名搞不定，總是有問題，就不用那個了。。。html

create-react-app project --typescript
複製代碼

src結構：node

.
├── api
├── assets
├── components
├── lang
├── routes
├── store-rematch
├── utils
├── views
├── App.scss
├── App.test.tsx
├── App.tsx
├── index.scss
├── index.tsx
├── router.tsx
└── setupProxy.js
複製代碼

二、typescript

tsconfig.json:

{
  "compilerOptions": {
    "baseUrl": "src",
    "outDir": "build/dist",
    "module": "esnext",
    "target": "es5",
    "lib": ["es6", "dom"],
    "sourceMap": true,
    "allowJs": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    "rootDir": ".",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "importHelpers": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true,
    "allowSyntheticDefaultImports": true,
    "paths": {
      "@/*": ["./*"]
    }
  },
  "awesomeTypescriptLoaderOptions": {
    "useBabel": true,
    "useCache": false,
    "emitRequireType": false
  },
  "includes": [
    "src"
  ],
  "exclude": [
    "node_modules",
    "build",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/setupTests.ts",
    "public/"
  ]
}

複製代碼

三、升級webpack4.x

webpack.config.dev.js中添加mode字段：mode: 'development'
webpack.config.prod.js中添加mode字段：mode: 'production'
react

須要升級的相關模塊：

yarn upgrade ** 升級或者直接 yarn add ** -D 也能夠webpack

file-loader
fork-ts-checker-webpack-plugin
html-webpack-plugin@next
react-dev-utils
url-loader
webpack
webpack-cli
webpack-dev-server
webpack-manifest-plugin

部分QA

編譯報錯：webpack is not a functionios

把上面相應插件升級一下，而後 script/start.js:
const compiler = createCompiler(webpack, config, appName, urls, useYarn);改成：
const compiler = createCompiler({webpack, config, appName, urls, useYarn});git
編譯報錯：this.htmlWebpackPlugin.getHooks is not a functiones6

注意html-webpack-plugin@next這個插件要添加@next才行
config/webpack.comfig.dev.js，config/webpack.config.prod.js:
new InterpolateHtmlPlugin(env.raw) 改成：
new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw)github

打包後報錯 Chunk Loading failedweb

config/paths.js:

function getServedPath(appPackageJson) {
  const publicUrl = getPublicUrl(appPackageJson);
  const servedUrl = envPublicUrl ||
    (publicUrl ? url.parse(publicUrl).pathname : '/');
  return ensureSlash(servedUrl, true);
}
複製代碼

將其中的'/'改成'./'便可

報@types/tapable @types/html-minifier @types/webpack不存在

yarn add @types/tapable @types/html-minifier @types/webpack
複製代碼

四、antd

yarn add antd
複製代碼

按需加載

ts/tsx 使用 awesome-typescript-loader 這個loader解析
antd 組件的css按需加載使用 babel-plugin-import 這個插件

yarn add awesome-typescript-loader babel-plugin-import
複製代碼

// webpack.config.dev.js, webpack.config.prod.js
{
    test: /\.(ts|tsx)$/,
    include: paths.appSrc,
    loader: 'awesome-typescript-loader',
    exclude: /node_modules/,
    options: {
      babelOptions: {
        "presets": ["react"],
        "plugins": [
          [
            "import", 
            { 
              "libraryName": "antd", 
              "style": "css" 
            }
          ]
        ]
      }
    }
  },
複製代碼

五、路由/權限控制

路由按需加載使用 @loadable/component
若是報 @types/xxx 的錯誤，按提示安裝就行，沒有的話就手動在 common.d.ts 添加一個 declare module '@loadable/component';

yarn add @loadable/component
複製代碼

路由

App之下的路由

經過如下，實現相似Vue中將路由嵌套在 App 內部的寫法，App 中的 props.children 至關於 Vue 中的 router-view ，而後 Header 等全局組件只會掛載一次

// src/router.tsx
...
<AuthRoute 
  path='/' 
  render={() => (
    <App> <Switch> {routes.map(route => route)} </Switch> </App>
  )}
/>
...
複製代碼

獨立在App以外的路由

aloneComp

// src/router.tsx
<Switch>
  {
    aloneComp.map(route => route)
  }
  <AuthRoute 
    path='/' 
    render={() => (
      <App> <Switch> {routes.map(route => route)} </Switch> </App>
    )}
  />
</Switch>
複製代碼

// src/App.tsx
...
  public render() {
    return (
      <div className={style.app}> <Header /> { this.props.children } </div>
    );
  }
複製代碼

路由管理

路由統一管理

// src/routes/index.tsx
import login from './login-register';
import home from './home';

/** * 使用這個組件 '@/routes/auth-route'，代替官方 Route，控制須要登陸權限的路由 */
export default [
  ...login,
  ...home
]
複製代碼

路由模塊

// src/routes/home.tsx
import AuthRoute from '@/routes/auth-route';
import * as React from 'react';
import Loadable from '@loadable/component';

// home
export default [
  <AuthRoute 
    key="home" 
    exact={true} 
    path="/" 
    component={Loadable(() => import('@/views/home'))} 
  />,
  <AuthRoute 
    key="home" 
    exact={true} 
    path="/home" 
    component={Loadable(() => import('@/views/home'))} 
  />
]
複製代碼

路由入口 router.tsx

分爲App之下的路由，和獨立在App以外的路由；視狀況而定，若是全部頁面都有一個同樣的 App 外殼，就不須要這麼分開

// src/router.tsx
import * as React from 'react';
import { HashRouter, Switch } from 'react-router-dom';
import AuthRoute from '@/routes/auth-route';
import Loadable from '@loadable/component';
import PageRoutes from './routes';
import login from '@/routes/login-register';

// 使用 import { lazy } from '@loadable/component';
// lazy()會有警告，跟React.lazy()同樣的警告
const App = Loadable(() => import('./App'));
const ErrComp = Loadable(() => import('./views/err-comp'));

const AppComp = () => {
  // 獨立在 app 以外的路由
  const aloneComp = [
    ...login
  ];
  const ErrRoute = 
    <AuthRoute 
      key='err404' 
      exact={true} 
      path='/err404' 
      component={ErrComp} 
    />;
  const NoMatchRoute = 
    <AuthRoute 
      key='no-match' 
      component={ErrComp} 
    />;

  const routes = [...PageRoutes, ErrRoute, NoMatchRoute];

  return (
    <Switch>
      {
        aloneComp.map(route => route)
      }
      <AuthRoute 
        path='/' 
        render={() => (
          <App>
            <Switch>
              {routes.map(route => route)}
            </Switch>
          </App>
        )}
      />
    </Switch>
  );
}

export default function Router() {
  return (
    <HashRouter>
      <AppComp />
    </HashRouter>
  );
}
複製代碼

項目入口 src/index.tsx

// src/index.tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from '@/store-rematch';
import AxiosConfig from './api';
import Router from './router';
import './index.scss';
// import registerServiceWorker from './registerServiceWorker'; 

const Loading = () => (<div>loading...</div>);

AxiosConfig(); // 初始化 axios

ReactDOM.render(
  <React.Suspense fallback={<Loading />}> <Provider store={store}> <Router /> </Provider> </React.Suspense>, document.getElementById('root') as HTMLElement ); // registerServiceWorker(); 複製代碼

登陸權限控制

使用js-cookie包，將登陸後後端接口返回的token(sessionId?)存在cookie中的'auth'字段

// src/routes/auth-route.tsx:
import * as React from 'react';
import { ComponentProps } from 'react';
import { Route, Redirect, RouteProps } from 'react-router';
import * as Cookies from 'js-cookie';

export interface AuthRouteProps extends RouteProps {
  key?: string|number,
  path?: string,
  auth?: boolean, // 是否須要權限
  redirectPath?: string, // 重定向後的路由
  render?: any,
  component?: ComponentProps<any>
}

const initialProps = {
  key: 1,
  path: '/login',
  auth: true,
  component: () => <div />
};

/** * 權限控制處理路由 */
const AuthRoute = (props: AuthRouteProps = initialProps) => {
  const { auth, path, component, render, key, redirectPath } = props;
  if (auth && !Cookies.get('auth')) {
    // console.log('path: ', path);
    return (
      <Route 
        key={key}
        path={path}
        render={() => 
          <Redirect to={{
            pathname: redirectPath || '/login',
            search: '?fromUrl='+path
          }} />
        } 
      />
    )
  }
  return (
    <Route 
      key={key}
      path={path}
      component={component}
      render={render}
    />
  )
}

export default AuthRoute;
複製代碼

六、api管理

axios

yarn add axios
複製代碼

axios配置、請求/響應攔截

// src/api/index.ts
import axios, { AxiosRequestConfig, AxiosError, AxiosResponse } from 'axios';
import { message } from 'antd';
import * as Cookies from 'js-cookie';
import * as NProgress from 'nprogress';

axios.defaults.timeout = 10000;
axios.defaults.baseURL = process.env.NODE_ENV === 'production'
  ? 'http://192.168.0.5:2333' // 這裏設置實際項目的生產環境地址
  : '';

let startFlag = false; // loadingStart的標誌

// 攔截器
export default function AxiosConfig() {
  // 請求攔截
  axios.interceptors.request.use((config: AxiosRequestConfig) => {
    if (config.data && config.data.showLoading) {
      // 須要顯示loading的請求
      startFlag = true;
      NProgress.start();
    }
    // 請求 access_token，登陸後每一個請求都帶上
    if (Cookies.get('auth')) {
      config.headers.Authorization = Cookies.get('auth');
    }
    if (config.params) config.params._t = Date.now();

    return config;

  }, (err: AxiosError) => {
    if (startFlag) {
      startFlag = false;
      NProgress.done();
    }
    return Promise.reject(err);
  });

  // 響應攔截
  axios.interceptors.response.use((res: AxiosResponse) => {
    if (startFlag) {
      startFlag = false;
      NProgress.done();
    }
    return res.data;
    
  }, (err: AxiosError) => {
    // 服務器錯誤
    if (err.response && (err.response.status+'').startsWith('5')) {
      message.error('請求出錯！')
    }
    if (startFlag) {
      startFlag = false;
      NProgress.done();
    }
    return Promise.reject(err);
  })
}
複製代碼

api 模塊

// src/api/test-api.ts
import axios from 'axios';

// 獲取文件
const api = {
  // 示例：
  // get只有params纔會做爲請求參數
  // 其餘請求方式如：POST,PUT,PATCH，data做爲請求參數
  testApi: (params: any = {}) => {
    // post
    // return axios.post('/api/file/uploadFile', params);

    // get
    return axios.get('/api/file/getFile', { 
      params, 
      data: { showLoading: true }
    });
  }
};

export default api;
複製代碼

api使用

import Api from '@/api/test-api';
...

Api.testApi(params).then((res: any) => {...});
複製代碼

七、狀態管理使用rematch

因爲 redux v7.1.0 新增了 useSelector, useDispatch 等Hooks，更新 react-redux 版本便可使用，下面將增長使用 useSelector, useDispatch 的版本

yarn add @rematch/core react-redux
複製代碼

store管理

// src/store-rematch/index.ts
import { init, RematchRootState } from '@rematch/core';
import * as models from './models/index';

// 緩存列表
const cacheList = ['common'];
const stateCache = sessionStorage.getItem('store-rematch');
// 初始化 state
const initialState = (stateCache && JSON.parse(stateCache)) || {};

const store = init({
  models,
  redux: {
    initialState
  }
});

// 監聽每次 state 的變化
store.subscribe(() => {
  const state = store.getState();
  let stateData = {};
  
  Object.keys(state).forEach(item => {
    if (cacheList.includes(item)) {
      stateData[item] = state[item];
    }
  });

  sessionStorage.setItem('store-rematch', JSON.stringify(stateData));
});

export type Store = typeof store;
export type Dispatch = typeof store.dispatch;
export type iRootState = RematchRootState<typeof models>;
export default store;
複製代碼

models

// src/store-rematch/models/indes.ts
import { createModel } from '@rematch/core';
// import detail from './detial';

export interface ICommonState {
  appName: string,
  isMobile: boolean,
  count: number,
  countAsync: number
}
const initialState: ICommonState = {
  appName: 'react-ts-mdnote',
  isMobile: false,
  count: 0,
  countAsync: 0
};
const common = createModel({
  state: initialState,
  reducers: {
    setIsMobile(state: ICommonState, payload: boolean) {
      return {
        ...state,
        isMobile: payload
      }
    },
    addCount(state: ICommonState) {
      return {
        ...state,
        count: state.count + 1
      }
    },
    setCount(state: ICommonState, payload: number) {
      return {
        ...state,
        countAsync: payload
      }
    }
  },
  effects: (dispatch) => ({
    async setCountAsync(payload, rootState) {
      await new Promise(resolve => setTimeout(resolve, 1000))
      dispatch.common.setCount(payload)
    }
  })
});

export {
  common,
  // detail
}
複製代碼

組件中使用

普通的 connect + mapState + mapDispatch 寫法

// src/views/home/index.tsx
import * as React from 'react';
import { connect } from 'react-redux';
import { iRootState, Dispatch } from '@/store-rematch';
import { Button } from 'antd';
import styles from './home.scss';

interface IProps {
  [prop: string]: any
}

function Home(props: IProps) {
  return (
    <div className={styles.home}> <div className={styles.content}> <p>react-ts-antd-template</p> <p className={styles.count}> count: { props.count } &emsp; <Button onClick={props.addCount}>count++</Button> </p> <p className={styles.count}> countAsync: { props.countAsync } &emsp; <Button onClick={props.setCountAsync}>countAsync</Button> </p> </div> </div>
  )
}

const mapState = (state: iRootState) => {
  return {
    count: state.common.count,
    countAsync: state.common.countAsync
  }
}
const mapDispatch = (dispatch: Dispatch) => {
  return {
    addCount: () => dispatch({ type: 'common/addCount' }),
    setCountAsync: () => dispatch({ type: 'common/setCountAsync', payload: new Date().getSeconds() }),
  }
}

export default connect(mapState, mapDispatch)(Home);
複製代碼

react-redux 新增Hooks: useSelector, useDispatch 寫法

import * as React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { iRootState, Dispatch } from '@/store-rematch';
import { Button } from 'antd';
import styles from './home.scss';

interface IProps {
  [prop: string]: any
}

function Home(props: IProps) {
  const dispatch: Dispatch = useDispatch();
  const { count, countAsync } = useSelector((state: iRootState) => state.common);
  
  return (
    <div className={styles.home}> <div className={styles.content}> <p>react-ts-antd-template</p> <p className={styles.count}> count: { count } &emsp; <Button onClick={() => dispatch({ type: 'common/addCount' })}>count++</Button> </p> <p className={styles.count}> countAsync: { countAsync } &emsp; <Button onClick={() => dispatch({ type: 'common/setCountAsync', payload: new Date().getSeconds() })} >countAsync</Button> </p> </div> </div>
  )
}

export default Home;
複製代碼

八、跨域代理

使用 http-proxy-middleware 插件

yarn add http-proxy-middleware
複製代碼

新建 scr/setupProxy.js

const proxy = require("http-proxy-middleware");

module.exports = function(app) {
  app.use(
    proxy('/', {
      target: 'http://192.168.0.5:2333',
      changeOrigin: true
    })
  );
};
複製代碼

在script/start.js中使用：

在

const devServer = new WebpackDevServer(compiler, serverConfig);
複製代碼

以後，添加如下代碼(若是能夠代理下面就不用加了)

require('../src/setupProxy')(devServer);
複製代碼

九、css-module、全局scss變量

class 輸出配置: [local]__[hash:base64:6]，輸出形如：content__1f1Aqs，詳細可看這裏

sass全局變量使用這個 loader sass-resources-loader，
配置一下 loader，而後在這個文件裏面 src/utils/variable.scss 寫變量，而後就能夠愉快的使用了

yarn add sass-resources-loader
複製代碼

// webpack.config.dev.js, webpack.config.prod.js
  {
    test: /\.(scss|less)$/,
    exclude: [/node_modules/],
    use: [
      {
        loader: require.resolve('style-loader'),
      },
      {
        loader: require.resolve('css-loader'),
        options: {
          importLoaders: 1,
          modules: true,
          localIdentName: '[local]__[hash:base64:6]'
        }
      },
      {
        loader: require.resolve('postcss-loader'),
        options: {
          // Necessary for external CSS imports to work
          // https://github.com/facebookincubator/create-react-app/issues/2677
          ident: 'postcss',
          plugins: () => [
            require('postcss-flexbugs-fixes'),
            autoprefixer({
              browsers: [
                '>1%',
                'last 4 versions',
                'Firefox ESR',
                'not ie < 9', // React doesn't support IE8 anyway
              ],
              flexbox: 'no-2009',
            }),
          ],
        },
      },
      {
        loader: require.resolve('sass-loader'),
      },
      {
        loader: 'sass-resources-loader',
        options: {
          resources: [
            path.resolve(__dirname, './../src/utils/variable.scss'),
          ],
        }
      }
    ]
  },
複製代碼

十、列表keep-alive

能夠看這裏

十一、高階組件與withRouter

主要是多個高階組件使用時候 props 類型的傳遞 須要注意

Context.Provider

// src/App.tsx
import * as React from 'react';
import Header from '@/components/header';
import Sidebar from '@/components/sidebar';
import Footer from '@/components/footer';
import styles from './App.scss';
import { RouteComponentProps, withRouter } from 'react-router';

interface IProps extends RouteComponentProps {
  [prop: string]: any
}
export interface IState {
  timer?: any
}
export type State = Readonly<IState>;

export interface IAppContext {
  appname: string
}
const defaultContext: IAppContext = { appname: 'react-antd-ts' };
export const AppContext = React.createContext(defaultContext);

class App extends React.Component<IProps, State> {
  public readonly state: State = {};
  
  constructor(props: IProps) {
    super(props);
  }

  public render() {
    return (
      <div className={styles.app}>
        <AppContext.Provider value={defaultContext}>
          <Header text="tteexxtt" />
          <Sidebar />
          { this.props.children }
          <Footer />
        </AppContext.Provider>
      </div>
    );
  }
}

export default withRouter(App);
複製代碼

Context.Consumer 包裝

也可使用 useContext 替代，就不須要下面Consumer包裝了

// src/components/withAppContext/index.tsx
import * as React from 'react';
import { AppContext, IAppContext } from '@/App';

// 高階組件：AppContext Consumer包裝
// 使用時包在最外層，如 withAppContext<IProps>(withRouter(Header));
function withAppContext<T>(Component: React.ElementType) {
  // T: 泛型，傳遞 Component 的 props 類型，被包裝的組件在父組件使用時智能提示
  // 可是須要和 withRouter 的類型分開， 
  // 由於 withRouter 不會傳遞除 history/location/match 以外的 props
  return (props: T) => {
    return (
      <AppContext.Consumer>
        {
          (appcontext: IAppContext) =>  <Component {...props} {...appcontext} />
        }
      </AppContext.Consumer>
    );
  }
}

export default withAppContext;
複製代碼

組件使用

注意:

一、withRouter 不會傳遞除 history/location/match 以外的 props，因此這裏與組件自己的 props 類型分開；

二、使用 withAppContext 傳遞的泛型是組件自己的 props：即 IProps

// src/components/header/index.tsx
import * as React from 'react';
import withAppContext from '@/components/withAppContext';
import { withRouter, RouteComponentProps } from 'react-router';
import styles from './header.scss';

const { useEffect } = React;

interface IProps {
  text: string,
  [prop: string]: any
}
// withRouter不會傳遞除 history/location/match 以外的 props，
// 因此這裏與組件自己的 props 類型分開
type IPropsWithRoute = IProps & RouteComponentProps;

function Header(props: IPropsWithRoute) {
  useEffect(() => {
    console.log(props);
  }, []);
  
  return (
    <section className={styles.header}> <div className="center-content"> <div>LOGO</div> <div>HEADER, { props.appname }, {props.text}</div> </div> </section>
  );
}

// withRouter不會傳遞除 history/location/match 以外的 props，
// 因此這裏使用組件自己的 props：即 IProps
export default withAppContext<IProps>(withRouter(Header));
複製代碼

十二、國際化

使用 react-intl

yarn add react-intl @types/react-intl
複製代碼

在 App 中使用 IntlProvider

// src/App.tsx
import { IntlProvider } from 'react-intl';
import messages from '@/lang';

...

class App extends React.Component<Props, State> {
  public readonly state: State = {
    lang: Cookies.get('lang') || 'zh'
  };
  
  constructor(props: Props) {
    super(props);
  }
  
  public onLangChange(locale: string) {
    Cookies.set('lang', locale);
    this.setState({ lang: locale });
  }

  public render() {
    // console.log(this.props);
    const { lang } = this.state;

    return (
      <div className={styles.app}>
        <IntlProvider key="intl" locale={lang} messages={messages[lang]}>
          <AppContext.Provider value={defaultContext}>
            <Header text="tteexxtt" onLangChange={(locale: string) => this.onLangChange(locale)} />
            <Sidebar />
            { this.props.children }
            <Footer />
          </AppContext.Provider>
        </IntlProvider>
      </div>
    );
  }
}
...
複製代碼

語言文件

lang 入口

// src/lang/index.ts
import en from './en_US';
import zh from './zh_CN';

export default {
  en,
  zh
};
複製代碼

messages 具體語言

本來是想像 Vue 裏面用的 i18n 那樣，語言模塊多一層，可是插件結構貌似不容許（可能須要設置），因此只能扁平展開模塊，而後在下面 messages 模塊 裏面的鍵名作處理了

// src/lang/zh_CN/index.ts
import home from './home';
// import detail from './detail';

export default {
  ...home,
  // ...detail
};
複製代碼

messages 模塊

注意鍵名，暫使用這種方式實現按模塊的多語言

// src/lang/zh_CN/home.ts
const home = {
  'home.home': '首頁',
  'home.list': '列表',
  'home.login': '登陸'
};

export default home;
複製代碼

組件使用

react-intl 這個多語言包除了 FormattedMessage以外，還有其餘的組件用來實現金額、貨幣、日期等差別顯示，這裏就不寫了，有須要看文檔照作就是了

// src/components/sidebar/index.tsx
import { FormattedMessage } from 'react-intl';
...
<FormattedMessage id="home.home" />
複製代碼

切換語言

// src/components/header/index.tsx
...
import Cookies from 'js-cookie';

const { useEffect, useMemo } = React;

interface IProps {
  text: string,
  onLangChange: (locale: string) => void,
  [prop: string]: any
}
// withRouter不會傳遞除 history/location/match 以外的 props，
// 因此這裏與組件自己的 props 類型分開
type IPropsWithRoute = IProps & RouteComponentProps;

function Header(props: IPropsWithRoute) {
  const lang = useMemo(() => {
    return Cookies.get('lang') || 'zh';
  }, [Cookies.get('lang')]);

  return (
    <section className={styles.header}> ... <div className={styles.langsection}> <span className={`${styles.lang} ${lang === 'zh' ? styles.active : ''}`} onClick={() => props.onLangChange('zh')} >中文</span> <span className={`${styles.lang} ${lang === 'en' ? styles.active : ''}`} onClick={() => props.onLangChange('en')} >English</span> </div> ... </section>
  );
}
...
複製代碼

1三、構建

輸出

使用 chunkhash 的話每次構建都會生成一個hash，致使內容不變可是仍是文件名卻變了；因此修改成 contenthash 根據內容生成 hash ，則 hash 值與內容相關，更好的緩存，可是不可避免的會致使構建時間增長，不過仍是值得的

文件名：修改 output 中文件名 chunkhash -> contenthash，如：

filename: 'static/js/[name].[contenthash:8].js',
chunkFilename: 'static/js/[name].[contenthash:8].chunk.js',
複製代碼

代碼分割

optimization: {
    splitChunks: {
      chunks: 'all'
    }
  },
複製代碼

tree-shaking

webpack 文檔有說明要設置 mode: 'production'，可是我這裏 build 以後的文件，打開 webpack module 會報錯；可是設置 mode: 'development' 以後就能夠正常訪問，只是文件比用 production 要大一點，，，這樣就沒意義了，因此這部分 暫時不搞 了。。。

TypeError: Cannot read property 'call' of undefined
複製代碼

package.json 中

添加 "sideEffects": false,

webpack.prod.js 中

optimization: {
    ...
    // tree shaking，與 package.json 中 "sideEffects": false 配合使用
    usedExports: true
  }
複製代碼

第三方資源 CDN

目前只有構建使用資源CDN引入，開發階段並沒有區別

react-router-dom 有問題會報錯，暫時沒法使用

暫時手動處理，也可使用 HtmlWebpackPlugin 自動處理

格式： 包名: 導出變量名

webpack 使用 externals:

externals: {
    'axios': 'axios',
    'lodash' : {
      commonjs: 'lodash',
      amd: 'lodash',
      root: '_' // 指向全局變量
    },
    'react': 'React',
    'react-dom': 'ReactDOM',
    'react-router': 'ReactRouter',
    // 'react-router-dom': 'ReactRouterDOM',
    'react-redux': 'ReactRedux',
  },
複製代碼

public/index.html 中添加第三方資源的 CDN 連接

<script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
<script src="https://cdn.bootcss.com/react/16.8.6/umd/react.production.min.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.8.6/umd/react-dom.production.min.js"></script>
<script src="https://cdn.bootcss.com/react-router/5.0.1/react-router.min.js"></script>
<!-- <script src="https://cdn.bootcss.com/react-router-dom/5.0.1/react-router-dom.min.js"></script> -->
<script src="https://cdn.bootcss.com/react-redux/7.1.1/react-redux.min.js"></script>
<script src="https://cdn.bootcss.com/lodash.js/4.17.15/lodash.core.min.js"></script>
複製代碼

1四、單元測試

暫時沒有。。。

最後

項目裏用到的東西，基本上都在上面了，後續有其餘的東西再更新加上吧；
前面有些代碼是早期寫的，後續加新的東西，因此跟後面有些功能是不同的，不過按以前的寫法通常不會有問題；就是新加功能須要改寫原來的部分代碼
另外，webpack 開發/生產配置能夠只用一個，而後使用 webpack merge 進去就能夠了，本文的 webpack 都是在舊的文件基礎上改的，可能有些東西是多餘的。。。
React Hooks 已經很好用，差很少能夠不用寫 class 組件了
多個高階組件組合的 props 傳遞須要注意一下
React 用了幾個月，能想到的就這些了，其餘的高級貨暫時沒有。。。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。