[聚合文章] react一键式脚手架，喜欢vue-cli的coder可以看过来

首先请看目录架构

区分生产、测试、开发

"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…