webpack4+react16+react-router4

近期react最振奮人心的更新hooks迅速流行於社區，工做之餘，出於對新技術的興趣和探索精神，搭建了這個簡單的腳手架工具，方便後續的迭代和小夥伴之間的交流。

原材料：

一、react16.7.0-alpha.2

二、webpack4.26.1 + webpack-cli3.1.2

三、react-router-dom4.3.1

相信不少小夥伴已經在社區看到不少有關以上各個技術的最新進展和分享了，可是對於想輕鬆上手，卻又缺少必定的腳手架配置經驗的小夥伴依然無所適從，想實踐起來又容易踩到各類坑。

因而，我先踩爲敬了。

咱們一塊兒學貓叫，一塊兒喵喵喵喵喵~

本腳手架主要採用較新的庫搭建，請注意node版本也要跟上哦~

目錄結構

請忽略package文件夾，它是存放打包文件的

1、入口開始

import { render } from 'react-dom';
import { applyMiddleware, createStore} from 'redux'
import { Provider } from 'react-redux'
import thunk from 'redux-thunk'
import promise from 'redux-promise-middleware'

import Routers from './router'
import reducers from './reducers'
const middleware = applyMiddleware(promise(), thunk)

const store = createStore(reducers, middleware)

render(
	<Provider store={store}>
		<Routers />
	</Provider>,
	document.getElementById("app")
)
複製代碼

(⊙o⊙)…好像沒啥好說的額，重點在Router，reducers這裏。咱們只要知道，這裏是打包/程序運行的切入點就能夠了。

2、承上，Router

import React from 'react'
import { connect } from 'react-redux'
import { replace } from 'react-router-redux'
import { BrowserRouter as Router, Route, Link, Redirect, Switch } from 'react-router-dom';
import AsyncComponent from 'components/AsyncComponent';

const NotMatch = AsyncComponent(() => import('components/NotMatch'));
const App = AsyncComponent(() => import('pages/app'));

@connect(null, {replace})
export default class RootRouter extends React.Component{
	render(){
		const props = this.props;
		//若是沒有權限，在此進行斷定並replace跳轉
		return (
			<Router>
				<div>
					<ul>
						<li><Link to='/'>首頁</Link></li>
						<li><Link to='/about'>關於</Link></li>
						<li><Link to='/topics'>主題列表</Link></li>
					</ul>
					<hr/>
					<Switch>
						<Route exact path="/" render={() => <Redirect to='/login'/>}/>
						<Route path="/login" component={App} />
						<Route path="/about" component={App} />
						<Route path="/topics" component={App} />
						<Route component={NotMatch} />
					</Switch>	
				</div>
			</Router>
		)
	}
}
複製代碼

react-router4.x後，Broswerhistory已經從react-router中移除，此時須要使用Broswerhistory時，須要安裝react-router-dom，這時候，路由看起來更像是一個常見的react組件了。以前的版本打包須要異步加載路由模塊使用webpack的require.ensure方法，好比

const App = (location, cb) => {
    require.ensure([], require => {
        cb(null, require('./components/App'))
    })
}
複製代碼

再配合 getComponent屬性：

<Route path="/" getComponent={ App }/>

而如今getComponent也沒啦，咋整？

寫個方法吧，沒錯，就是路由文件中的AsyncComponent方法：

AsyncComponent.jsx

import React, { Component } from "react";

export default importComponent => class AsyncComponent extends Component {
    state = {
		component: null
	}
	async componentDidMount(){
		const {default: component} = await importComponent();
		this.setState({component});
	}
	render() {
		const C = this.state.component;
		return C ? <C {...this.props} /> : null;
	}
};
複製代碼

其實這也是一個組件，只不過是該組件加載完成後，再導入真正須要加載的組件。此時還要配合webpack打包配置的output.chunkFilename屬性，稍後會貼出代碼。

@connect(null, {replace})是類的裝飾器，不瞭解的能夠單獨百度一下。

3、啓下，component

再日後就很清晰了，./components/App下的組件就是咱們的業務組件了。

直接看截圖中的SubCom.jsx組件代碼

import React, { useState, useEffect, useRef } from 'react';



const effect = count => {
	// Update the document title using the browser API
  document.title = `You clicked ${count} times`;
  return () => document.title = 'clear'
};


 export default ({change}) => {
	let [count, setCount] = useState(2);
	const click = e => {
		count++;
		change(count);
		setCount(count);
	};
	useEffect(effect.bind(null, count));
	const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputEl.current.focus();
  };
	return <React.Fragment>
		<div onClick={click}>
			{count}
			<input ref={inputEl} type="text" />
			<button onClick={onButtonClick}>Focus the input</button>
		</div>
		<p>你穩定不點個贊再走嗎？</p>
    </React.Fragment>
}

複製代碼

咱們期待的hooks登場啦啦啦~~~但今天不是講hooks的，社區講它的不少很詳細，這裏直接用了。順便把useRef，React.Fragment等用法也貼了上來。

同時爲了方便直接開展業務，reducer，action，接口格式，axios二次封裝以及示例函數均已寫好，由於有代碼潔癖，因此文件夾佈局以及重複邏輯均作了處理。

配置文件也比較基本，爲了加快編譯速度，特地添加了動態連接庫的配置，這裏強調一下：除了babel-loader，並無配置css有關的loader，url-loader，file-loader以及樣式抽離、壓縮的插件，小夥伴們根據本身的須要添加配置便可。代碼太多就不貼了。

之前有面試官問我怎樣使用ES6的語法書寫配置文件，當時確實沒有思考過這個問題，直接告訴她我對這個不感興趣~~~不過今天的配置文件用的ES6來寫的，配置文件名稱後加上.babel後綴便可......就是這麼簡單。 完了，再發一張個人貓吧

差點忘了，代碼地址git@github.com:huangshuai9411/react-hooks…