React-Dev基于webpack(打包)&gulp(工作流)&koa(数据mock)的本地开发环境。
执行命令：
npmrunstart启用带有hmr功能的本地服务开发环境
npmrundebug启用不带hrm功能的本地服务开发环境
npmrunmock启用带有数据mock功能的本地服务开发环境（不带hmr，因该功能还不稳定Webpack用来做模块热替换）
npmrunbuild执行项目构建，构建至.build文件夹，用于线上发布
npmruntest执行单元测试
数据mock配置说明
目前数据mock功能只能支持mock一个接口（设定为/api/list，所以所有的mock请求都请求这一个接口），在配置中，需要将不同的请求区分配置放在req参数中，然后在配置对象中指定req对应值返回的数据即可。
配置完数据后要想使得mock的数据生效，需要关闭当前本地服务，执行npmrunmock重新启动服务，mock数据方可生效。
技术方案
reflux+react
webpack+gulp+koa（用于mock数据）
npm
目录结构
├──.build [项目发布后生成的目录或文件] └───sc-radar [前端开发代码目录] ├──app.js [业务js目录] ├──app.css [业务css目录] └──index.html [入口文件] ├──app [前端开发静态资源] ├──gulp [gulp任务目录] ├──mock [ajax请求数据mock配置] ├──node_modules [依赖] ├──test [测试] ├──.editorconfig [代码格式化小工具配置] ├──.eslintrc [eslint代码检查配置文件] ├──.gitignore [配置git操作会忽略的文件] ├──buildConfig.js [构建配置文件] ├──gulpfile.js [gulp任务执行入口文件] ├──HISTORY.md [修改记录] ├──index.html [spa入口] ├──make-webpack.config.js [webpack-config统一配置文件] ├──package.json [前端项目依赖配置] ├──READMD.md [你在看的文件] ├──routes.js [koaproxy路由] ├──server-with-mock.js [koa利用中间件起本地服务] ├──webpack-dev-mock.config.js [带mock功能的本地服务配置] ├──webpack-dev-server.config.js [不带hmr功能的本地服务配置] ├──webpack-hot-dev-server.config.js [带hmr功能的本地服务配置] └──webpack-production.config.js [构建用于部署的静态资源文件配置]
依赖说明
lodash "react-router":"1.0.0-beta3" 不稳定版本，后续要关注下更新
webpack记录
output里的publicPath:'/build/'注释掉，此配置会导致生成build中的css引用的字体路径为/build/xxxx(publicPath:'/')
BUGLIST
console报错InvariantViolation:addComponentAsRefTo(...):OnlyaReactOwnercanhaverefs.Thisusuallymeansthatyou'retryingtoaddareftoacomponentthatdoesn'thaveanowner(thatis,wasnotcreatedinsideofanothercomponent'srendermethod).Tryrenderingthiscomponentinsideofanewtop-levelcomponentwhichwillholdtheref.
解决方法：同时使用了两个版本的react,删除本地的react即可
react-highcharts用webpack打包，使用babel打包后报错
解决方法：react-highcharts自身已经用webpack打包，二次打包时添加'usestrict';手动删除'usestrict';报错消失，通过配置webpackconfig的loader,修改{test:/.(js)$/,loader:'babel-loader?loose=all'},为{test:/.(js)$/,exclude:/node_modules/,loader:'babel-loader?loose=all'},可以解决此问题。
重构代码组织目录，点击菜单报错
type.toUpperCase()isnotafunction由于重构sideItem,sideNav导致了循环引用。webpack并未报错，只是返回了{}。导致React无法识别。
模型： Stroe:state[a:'',b:''], onGetA:Ajax,trigger({a:a}) onGetB:Ajax,trigger({b:b}) componentsDidMount:Action.getA,Action.getB
问题：组件中的显示情况，当ajax获取到数据a后，组件中的a数据更新，当ajax获取到数据b后，组件中的b数据更新了，但是之前a数据更新的结果消失了。调试：render中用console.log查看组件的state，一共有三条记录: this.statea:'',b:''第一次渲染 this.statea;'value'ajax获取到了a的数据，但是state中没有b this.stateb:'value'ajax获取到了b的数据，但是state中没有a解决方法： 将store中的trigger({a:a}),trigger({b:b})都修改为trigger({a:a,b:b})
jsPlumb打包
imports-loaderexports-loader
webpack.config.js:
module.noParse : /min\.js|jsPlumb.*\.js/ ### 不解析依赖usagemethod1:
var jsPlumb = require('imports-loader?this=>window!exports-loader?jsPlumb!./dom.jsPlumb-1.7.7-min.js');usagemethod2:
require('jsPlumb') ;// webpack.config.js loaders: {test: /\.jsPlumb.*\.js$/, loader: 'imports-loader?this=>window!exports-loader?jsPlumb'}// or resolve.alias
评论