從零開始搭建React/redux/webpack腳手架

你們好，這裏是@IT·平頭哥聯盟，我是首席填坑官——蘇南(South·Su)，今天要給你們分享的是<<個人react入門到放棄之路>>,這篇博客本來是從17年初寫的，一直沒有在掘金髮布，但願今天不會太晚，望各位老司機勿噴！

上圖能夠找亮點，留言答對有獎哦～～～～

最近看到不少react相關的問題跟討論，愈來愈多的小夥伴喜歡這個框架了， 同時也在看到了有些入門的小夥伴遇到了各類各樣的問題，本人也是react框架使用都一枚， 公司是騰訊、阿里、平安三巨頭合資的一家公司，分別上海、深圳、杭州、北京、廣州等多個分部，前端人員也有近100人， 框架也在統一往react靠齊，本人也在實際項目中應用了蠻長一段時間，跟社區的不少新夥伴同樣，入坑的過程當中，遇到過各類各樣的問題， 這裏就不一一詳細吐槽了，吐下去，大家估計要罵我瘋了，重點就講講咱們項目的一些整個框架結構吧，

由於不少小夥伴在入門後，上手作項目時，都會苦腦於項目結構如何構建，便於後期維護、項目迭代等等的問題；

 地址：[github項目示例地址] ，若是以爲不錯，對你有幫助記得幫 轉發 和 star哦，感謝您的支持。

項目結構示例：

能夠掃碼預覽哦

上面是項目的大致結構，有興趣的小夥伴，能夠進入項目詳細看看，下面重點列出一些細節特性：

 一、首先咱們會分不一樣的環境，寫不一樣的配置文件，便於結構清晰，維護修改；

/server/config.js

var dev = require('./env/dev'),
    test = require('./env/test'),
    pre = require('./env/pre'),
    prd = require('./env/prd');

var defaults = {
  root: path.normalize(__dirname + '/..')
};

module.exports = {
  dev: extend(dev, defaults),
  test: extend(test, defaults),
  pre: extend(pre, defaults),
  prd: extend(prd, defaults)
}[process.env.DEPLOY_ENV || 'dev']; //DEPLOY_ENV 爲 node服務端環境變量
 複製代碼

二、全部的項目組件都放在pages裏，pages裏再按項目模塊去劃分項目結構，actions、reducers內也是如何，共用的組件放在components內，

三、路由文件也是按項目模塊來劃分，不要所有放在一個文件內，找起來特別不方便，也不容易維護， 

四、後面統一引入在一個入口文件內，對外輸出，

/src/pages/route.js
import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from "react-redux";
import useBasename from 'history/lib/useBasename';
import { hashHistory, browserHistory, Router } from 'react-router';
import Store from "src/store";
import bridge from 'src/utils/bridge'

const rootRoute = {
  path: '/',
  component: require('../components/app/App'),
  childRoutes: [
    require('./Home/route'),//引入不一樣模塊的路由
    require('./Intro/route'),
    require('./Handler/route'),
    require('./Setting/route'),
    {
      path: '*',
      getComponent(location, cb) {
        require.ensure([], (require) => {
          cb(null, require('./NotFoundPage'));
        });
      },
      onEnter: () => bridge.doAction('setTitle', { title: '出錯啦' })
      // onEnter: () => bridge.doAction('setWechat')
    }
  ],
  indexRoute:{ onEnter: (nextState, replace) => replace('/home') }, //默認重定向到->首頁
};
複製代碼

 五、實現了按需加載，共用代碼提取， 
六、該項目主要用到了 react、react-router、redux、redux-thunk、es六、babel、webpack、node、express、fetch等
七、特別說明，window.devToolsExtension是redux的一個調試工具，在chrome瀏覽器應用商店搜索redux後按裝，開發環境就能看到redux狀態的每一步變化了，便於調試提升開發效率;

import {createStore,applyMiddleware} from "redux";
import thunk from "redux-thunk";
import reducers from "src/reducers";

function configStore (){
    let createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
    //dev環境開啓redux調試
    let store  = createStoreWithMiddleware(reducers,(__DEBUG__ && window.devToolsExtension ? window.devToolsExtension() : undefined));
    return store;
};

export default configStore();
複製代碼

八、固然還有其餘的，就不一一說明了，可進入項目細看， 

地址：[github項目示例地址] ，若是以爲不錯，對你有幫助記得幫 轉發 和 star哦，感謝您的支持。

 最近纔在開始嘗試寫博客，新手上路中，若是文章中有不對之處，煩請各位大神斧正。若是你以爲這篇文章對你有所幫助，請記得點贊哦～(^_^)

想更詳細的瞭解我？還有更多疑惑？關注下方公衆號，直接向做者交流吧！

做者：蘇南 - 首席填坑官
交流羣：912594095，公衆號： honeyBadger8
本文原創，著做權歸做者全部。商業轉載請聯繫 @IT·平頭哥聯盟得到受權，非商業轉載請註明原連接及出處。