摘要：我的入門到放棄之路最近看到很多相關(guān)的問題跟討論，越來越多的小伙伴喜歡這個(gè)框架了，同時(shí)也在看到了有些入門的小伙伴遇到了各種各樣的問題，本人也是框架使用都一枚，公司是騰訊阿里平安三巨頭合資的一家公司，分別上海深圳杭州北京廣州等多個(gè)分部，前端人員

最近看到很多react相關(guān)的問題跟討論，越來越多的小伙伴喜歡這個(gè)框架了，

同時(shí)也在看到了有些入門的小伙伴遇到了各種各樣的問題，本人也是react框架使用都一枚，

公司是騰訊、阿里、平安三巨頭合資的一家公司，分別上海、深圳、杭州、北京、廣州等多個(gè)分部，前端人員也有近100人，

框架也在統(tǒng)一往react靠齊，本人也在實(shí)際項(xiàng)目中應(yīng)用了蠻長(zhǎng)一段時(shí)間，跟社區(qū)的很多新伙伴一樣，入坑的過程中，遇到過各種各樣的問題，

這里就不一一詳細(xì)吐槽了，吐下去，你們估計(jì)要罵我瘋了，重點(diǎn)就講講我們項(xiàng)目的一些整個(gè)框架結(jié)構(gòu)吧，

因?yàn)楹芏嘈』锇樵谌腴T后，上手做項(xiàng)目時(shí)，都會(huì)苦腦于項(xiàng)目結(jié)構(gòu)如何構(gòu)建，便于后期維護(hù)、項(xiàng)目迭代等等的問題；

地址：github項(xiàng)目示例地址 ，如果覺得不錯(cuò)，對(duì)你有幫助記得幫 轉(zhuǎn)發(fā) 和 star哦，感謝您的支持。

可以掃碼預(yù)覽哦

上面是項(xiàng)目的大體結(jié)構(gòu)，有興趣的小伙伴，可以進(jìn)入項(xiàng)目詳細(xì)看看，

1、首先我們會(huì)分不同的環(huán)境，寫不同的配置文件，便于結(jié)構(gòu)清晰，維護(hù)修改；
2、所有的項(xiàng)目組件都放在pages里，pages里再按項(xiàng)目模塊去劃分項(xiàng)目結(jié)構(gòu)，actions、reducers內(nèi)也是如何，共用的組件放在components內(nèi)，
路由文件也是按項(xiàng)目模塊來劃分，不要全部放在一個(gè)文件內(nèi)，找起來特別不方便，也不容易維護(hù)，
4、后面統(tǒng)一引入在一個(gè)入口文件內(nèi)，對(duì)外輸出，
5、實(shí)現(xiàn)了按需加載，共用代碼提取，
6、該項(xiàng)目主要用到了
react、react-router、redux、redux-thunk、es6、babel、webpack、node、express、fetch等
7、特別說明，window.devToolsExtension是redux的一個(gè)調(diào)試工具，在chrome瀏覽器應(yīng)用商店搜索redux后按裝，開發(fā)環(huán)境就能看到redux狀態(tài)的每一步變化了，便于調(diào)試提高開發(fā)效率;
8、當(dāng)然還有其他的，就不一一說明了，可進(jìn)入項(xiàng)目細(xì)看，

/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服務(wù)端環(huán)境變量

路由文件也是按項(xiàng)目模塊來劃分
/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: "出錯(cuò)啦" })
      // onEnter: () => bridge.doAction("setWechat")
    }
  ],
  indexRoute:{ onEnter: (nextState, replace) => replace("/home") }, //默認(rèn)重定向到->首頁
};

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

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

export default configStore();

地址：github項(xiàng)目示例地址 ，如果覺得不錯(cuò)，對(duì)你有幫助記得幫 轉(zhuǎn)發(fā) 和 star哦，感謝您的支持。

想更詳細(xì)的了解我？還有更多疑惑？請(qǐng)猛戳這里吧，記得關(guān)注我們的公眾號(hào)哦！

作者：蘇南 - 首席填坑官
交流群：912594095，公眾號(hào)：honeyBadger8
本文原創(chuàng)，著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系@IT·平頭哥聯(lián)盟獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明原鏈接及出處。