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 用了几个月，能想到的就这些了，其余的高级货暂时没有。。。