首先請看目錄架構
區分生產、測試、開發
"dev": "node build/dev-server.js",
"start": "node build/dev-server.js",
"prod": "cross-env NODE_ENV=production node build/build.js",
"test": "cross-env NODE_ENV=testing node build/build.js"
src目錄下的講解
附帶axios封裝庫，全域性攔截登入token.(service/ajax.js)
import axios from 'axios';import { Message } from 'element-ui';import { getItem,remobeItem } from '../util/localStore'import { doLogin } from '../util/localStore'import { message } from 'antd';// 建立axios例項const service = axios.create({ // baseURL: process.env.BASE_API, // api的base_url // timeout: 5000, // 請求超時時間 headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, transformRequest: [function (data) { // Do whatever you want to transform the data let ret = '' for (let i in data) { if(typeof data[i] == 'object'){ let listData = data[i] for(let k = 0; k < listData.length; k++ ){ ret += encodeURIComponent(i) + '=' + encodeURIComponent(listData[k]) + '&' } }else{ ret += encodeURIComponent(i) + '=' + encodeURIComponent(data[i]) + '&' } } ret = ret.substring(0,ret.length-1) return ret }],});// request攔截器service.interceptors.request.use(config => { // Do something before request is sent if (getItem('token')) { config.headers['token'] = getItem('token'); } return config;}, error => { // Do something with request error console.log(error); // for debug Promise.reject(error);})// respone攔截器service.interceptors.response.use( response => { if(response.data.err_code){ message.error(response.data.err_msg); if(response.data.err_code == '12000'){ remobeItem('token'); doLogin(); } return Promise.reject(response.data.err_msg) }else{ return response } }, error => { console.log('err' + error);// for debug message.error(error.message); return Promise.reject(error); })
export default service;複製程式碼router下按需載入元件，實現打包最小化
import React from 'react'import { Router, Route, IndexRedirect } from 'react-router'
import Login from '../containers/Login/index.jsx'import Layout from '../containers/Layout'//按需載入const Users = (location, cb) => { require.ensure([], require => { cb(null, require('../containers/Users').default) },'users')}
const Usersbill = (location, cb) => { require.ensure([], require => { cb(null, require('../containers/Usersbill').default) },'usersbill')}
const Present = (location, cb) => { require.ensure([], require => { cb(null, require('../containers/Present').default) },'present')}
const ErrorPage = (location, cb) => { require.ensure([], require => { cb(null, require('../containers/ErrorPage').default) },'ErrorPage')}
class RouterMap extends React.Component { constructor(props){ super(props) } render() { return ( <Router history={this.props.history}> <Route path="/"> {/* LOGIN */} <IndexRedirect to="login" /> <Route path="login" component={Login}> </Route> {/* User */} <Route path="index" component={Layout}> <IndexRedirect to="users" /> <Route path="users" getComponent={Users}/> <Route path="usersbill" getComponent={Usersbill}/> <Route path="present" getComponent={Present}/> </Route> <Route path="*" getComponent={ErrorPage}/> </Route> </Router> ) }}
export default RouterMap複製程式碼store下工廠化store，redux-thunk實現非同步，返回function型別的可變action,redux-logger開啟日誌服務。
import { createStore, applyMiddleware } from 'redux'import thunkMiddleware from 'redux-thunk' //非同步actions處理import { createLogger } from 'redux-logger'import rootReducer from '../reducers'
const loggerMiddleware = createLogger()
export default function configureStore(initialState) { const store = createStore(rootReducer, initialState, // 觸發 redux-devtools window.devToolsExtension ? window.devToolsExtension() : undefined, applyMiddleware(thunkMiddleware,loggerMiddleware ) ) return store}複製程式碼其他精彩內容，歡迎star github.com/honeydlp/re…