React-DevReact本地開發(fā)環(huán)境?
。
執(zhí)行命令：
npm run start
啟用帶有hmr功能的本地服務(wù)開發(fā)環(huán)境npm run debug
啟用不帶hrm功能的本地服務(wù)開發(fā)環(huán)境npm run mock
啟用帶有數(shù)據(jù)mock功能的本地服務(wù)開發(fā)環(huán)境（不帶hmr，因該功能還不穩(wěn)定Webpack用來(lái)做模塊熱替換）npm run build
執(zhí)行項(xiàng)目構(gòu)建，構(gòu)建至.build文件夾，用于線上發(fā)布npm run test
執(zhí)行單元測(cè)試
數(shù)據(jù)mock配置說(shuō)明
目前數(shù)據(jù)mock功能只能支持mock一個(gè)接口（設(shè)定為
/api/list，所以所有的mock請(qǐng)求都請(qǐng)求這一個(gè)接口），在配置中，需要將不同的請(qǐng)求區(qū)分配置放在req參數(shù)中，然后在配置對(duì)象中指定req對(duì)應(yīng)值返回的數(shù)據(jù)即可。配置完數(shù)據(jù)后要想使得mock的數(shù)據(jù)生效，需要關(guān)閉當(dāng)前本地服務(wù)，執(zhí)行
npm run mock重新啟動(dòng)服務(wù)，mock數(shù)據(jù)方可生效。
技術(shù)方案
reflux + react
webpack + gulp + koa（用于mock數(shù)據(jù)）
npm
目錄結(jié)構(gòu)
├── .build [項(xiàng)目發(fā)布后生成的目錄或文件]
└─── sc-radar [前端開發(fā)代碼目錄](méi)
├── app.js [業(yè)務(wù)js目錄](méi)
├── app.css [業(yè)務(wù)css目錄](méi)
└── index.html [入口文件]
├── app [前端開發(fā)靜態(tài)資源]
├── gulp [gulp任務(wù)目錄](méi)
├── mock [ajax請(qǐng)求數(shù)據(jù)mock配置]
├── node_modules [依賴]
├── test [測(cè)試]
├── .editorconfig [代碼格式化小工具配置]
├── .eslintrc [eslint代碼檢查配置文件]
├── .gitignore [配置git操作會(huì)忽略的文件]
├── buildConfig.js [構(gòu)建配置文件]
├── gulpfile.js [gulp任務(wù)執(zhí)行入口文件]
├── HISTORY.md [修改記錄](méi)
├── index.html [spa入口]
├── make-webpack.config.js [webpack-config統(tǒng)一配置文件]
├── package.json [前端項(xiàng)目依賴配置]
├── READMD.md [你在看的文件]
├── routes.js [koa proxy路由]
├── server-with-mock.js [koa利用中間件起本地服務(wù)]
├── webpack-dev-mock.config.js [帶mock功能的本地服務(wù)配置]
├── webpack-dev-server.config.js [不帶hmr功能的本地服務(wù)配置]
├── webpack-hot-dev-server.config.js [帶hmr功能的本地服務(wù)配置]
└── webpack-production.config.js [構(gòu)建用于部署的靜態(tài)資源文件配置]
依賴說(shuō)明
lodash "react-router": "1.0.0-beta3" 不穩(wěn)定版本，后續(xù)要關(guān)注下更新
webpack記錄
output 里的 publicPath: '/build/' 注釋掉，此配置會(huì)導(dǎo)致生成build中的css引用的字體路徑為/build/xxxx (publicPath:'/')
BUG LIST
console 報(bào)錯(cuò) Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. This usually means that you're trying to add a ref to a component that doesn't have an owner (that is, was not created inside of another component's render method). Try rendering this component inside of a new top-level component which will hold the ref.
解決方法：同時(shí)使用了兩個(gè)版本的react,刪除本地的react即可
react-highcharts 用webpack打包，使用babel打包后報(bào)錯(cuò)
解決方法：react-highcharts自身已經(jīng)用webpack打包，二次打包時(shí)添加 'use strict'; 手動(dòng)刪除 'use strict'; 報(bào)錯(cuò)消失，通過(guò)配置webpack config 的loader,修改{test: /.(js)$/,loader: 'babel-loader?loose=all'}, 為 {test: /.(js)$/,exclude: /node_modules/,loader: 'babel-loader?loose=all'}, 可以解決此問(wèn)題。
重構(gòu)代碼組織目錄，點(diǎn)擊菜單報(bào)錯(cuò)
type.toUpperCase() is not a function 由于重構(gòu) sideItem ,sideNav 導(dǎo)致了循環(huán)引用。webpack并未報(bào)錯(cuò)，只是返回了 {} 。導(dǎo)致 React無(wú)法識(shí)別。
模型： Stroe : state [a:'',b:''] , onGetA: Ajax , trigger({a:a}) onGetB: Ajax , trigger({b:b}) componentsDidMount : Action.getA , Action.getB
問(wèn)題：組件中的顯示情況，當(dāng)ajax獲取到數(shù)據(jù)a后，組件中的a數(shù)據(jù)更新，當(dāng)ajax獲取到數(shù)據(jù)b后，組件中的b數(shù)據(jù)更新了，但是之前a數(shù)據(jù)更新的結(jié)果消失了。 調(diào)試：render中用console.log查看組件的state，一共有三條記錄: this.state a:'',b:'' 第一次渲染 this.state a;'value' ajax獲取到了a的數(shù)據(jù)，但是state中沒(méi)有b this.state b:'value' ajax獲取到了b的數(shù)據(jù)，但是state中沒(méi)有a 解決方法： 將store中的trigger({a:a}),trigger({b:b})都修改為trigger({a:a,b:b})
jsPlumb 打包
imports-loader exports-loader
webpack.config.js :
module.noParse : /min\.js|jsPlumb.*\.js/ ### 不解析依賴
usage method 1:
var jsPlumb = require('imports-loader?this=>window!exports-loader?jsPlumb!./dom.jsPlumb-1.7.7-min.js');
usage method 2:
require('jsPlumb') ;
// webpack.config.js
loaders: {test: /\.jsPlumb.*\.js$/, loader: 'imports-loader?this=>window!exports-loader?jsPlumb'}
// or resolve.alias