React本地开发环境​ React-Dev

未知
JavaScript 查看源码»
跨平台
2016-03-23
开源中国股瞎

React-Dev基于webpack(打包)&gulp(工作流)&koa(数据mock)的本地开发环境

执行命令:

  • npm run start
    启用带有hmr功能的本地服务开发环境

  • npm run debug
    启用不带hrm功能的本地服务开发环境

  • npm run mock
    启用带有数据mock功能的本地服务开发环境(不带hmr,因该功能还不稳定Webpack用来做模块热替换

  • npm run build
    执行项目构建,构建至.build文件夹,用于线上发布

  • npm run test
    执行单元测试

数据mock配置说明

  • 目前数据mock功能只能支持mock一个接口(设定为/api/list,所以所有的mock请求都请求这一个接口),在配置中,需要将不同的请求区分配置放在req参数中,然后在配置对象中指定req对应值返回的数据即可。

  • 配置完数据后要想使得mock的数据生效,需要关闭当前本地服务,执行npm run mock重新启动服务,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                         [koa proxy路由]
    ├── 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:'/')

BUG LIST

console 报错 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.

解决方法:同时使用了两个版本的react,删除本地的react即可

react-highcharts 用webpack打包,使用babel打包后报错

解决方法:react-highcharts自身已经用webpack打包,二次打包时添加 'use strict'; 手动删除 'use strict'; 报错消失,通过配置webpack config 的loader,修改{test: /.(js)$/,loader: 'babel-loader?loose=all'}, 为 {test: /.(js)$/,exclude: /node_modules/,loader: 'babel-loader?loose=all'}, 可以解决此问题。

重构代码组织目录,点击菜单报错

type.toUpperCase() is not a function 由于重构 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.state a:'',b:'' 第一次渲染    this.state a;'value' ajax获取到了a的数据,但是state中没有b    this.state b:'value' ajax获取到了b的数据,但是state中没有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
的码云指数为
超过 的项目
加载中

评论(0)

暂无评论

暂无资讯

暂无问答

react+webpack开发环境搭建

###Webpack配置 ####目录结构 --your project |--app |--components |--productBox.jsx |--main.js |--build |--index.html |--bundle.js(该文件是webpack打包后生成的) ####初始化,会直接创...

2016/09/05 15:39
169
0
webpack 学习笔记-webpack+react+es6开发环境搭建

webpack+react+es6开发环境搭建

2016/05/20 10:50
42
2
在现有 server 中集成 webpack + react 热加载

在现有 server 生成的页面中集成 webpack 热加载功能的一些要点。

2016/02/03 03:50
1K
1
最新的react0.14支持ES6开发环境配置方案

React最新的0.14结合es6开发的webpack配置方案及演示代码

2015/11/11 22:34
76
0
react+webpack构建步骤

一、安装全局组件 用于转译 es6、react 到 es5,打包工程,启动 webpack-dev-server 服务 npm install babel-core babel-loader babel-preset-es2015 babel-preset-react webpack-dev-serve...

2016/10/12 15:48
53
1
wepack4+react+express

项目结构 webpack.demo --| public --| index.html --| src --| index.js --| index.less --| App.js --| App.less --| .babelrc --| package.json --| server.js --......

2018/08/12 14:50
22
0
基于webpack接入React包安装

在使用babel的项目中接入React 框架很简单,只需要加入React所依赖的Presets babel-preset-react. 安装react, react-dom, webpack 在项目根目录下执行下面命令,其中--save的含义是项目上线运...

2018/08/02 09:13
18
0
react + webpack安装配置

使用CDN库方式 <script src="http://static.runoob.com/assets/react/react-0.14.7/build/react.min.js"></script> <script src="http://static.runoob.com/assets/react/react-0.14.7/buil...

2017/01/20 10:30
16
0
从零开始搭建webpack+react开发环境

## 环境主要依赖版本 - webpack@4.8.1 - webpack-cli@2.1.3 - webpack-dev-server@3.1.4 - react@16.3.2 - babel-core@6.26.3 - babel-preset-env@1.6.1 - bable-preset-react@6.24.1 ## we...

2018/05/08 16:51
1K
0
eclipse和create-react-app(eclipse react导入为工程)

eclipse 搭建react开发环境搭建 create-react-app+eclipse react eclipse create-react-app菜鸟总结(eclipse) 第1天初学总结,本教程从零基础搭建eclipse平台下的react官方脚手架开发 作者...

2018/07/25 18:16
765
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部