react一鍵式腳手架,喜歡vue-cli的coder可以看過來

wuliDream發表於2018-01-08

首先請看目錄架構

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…


相關文章