小悟:react + redux + react-router+ ES6/7 + webpack 技术栈

运营后台服务器架构

2017-03-01 连鹏飞

服务端
  经过测试,服务端开发语言不影响打包好的项目运行,只需要将打包好的项目丢进启动的服务器即可。
  所以,建议后期,启动一个java服务。
  例如,打包好的项目名字为pxq,后台启动的服务端地址是localhost:8085,那么浏览器的访问地址就是localhost:8085/pxq
前端本地开发环境
技术栈
react + redux +  less + scss + ES6/7 + webpack +  react-router按需加载 + react-transform热替换 + webpack-dev-server 

基础环境    
1.node版本 6.2.0+
2.npm版本 3.8.9+
3.webpack版本 1.13.0+
4.less版本 2.6.1+
5.less-loader版本 2.2.3+
6.sass版本 0.5.0+
7.sass-loader版本 4.0.2+
8.css-loader版本 0.23.1+
9.style-loader版本 0.13.1+
10.jsx-loader版本 0.13.2+
11.jquery版本 3.1.1+
12.bootstrap版本 4.0.0-alpha.2+
13.babel-core版本 6.18.2+
14.babel-loader版本 6.2.8+
15.babel-plugin-transform-decorators-legacy版本 1.3.4+
16.babel-preset-es2015版本 6.6.0+
17.babel-preset-react版本 6.5.0+
18.babel-preset-react-hmre版本 1.1.1+
19.babel-preset-stage-0版本 6.16.0+

dev环境
1.react版本 15.3.2+
2.react-dom版本 15.3.2+
3.redux版本 3.6.0+
4.react-redux版本 4.4.5+
5.react-router版本 2.8.1+
6.redux-thunk版本 2.1.0+
7.react-hot-loader版本 1.3.1+

windows下配置过程:
$ md pxq 创建pxq文件
$ cd pxq 进入pxq
$ npm init 初始化package.json文件
$ npm install 安装依赖包
$ npm run hot 热启动开发环境
$ npm run dev 打包项目

参照react官网,建立如下类似的文件结构
    ![项目结构](https://img-blog.csdn.net/20170302111609161?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbHBmMTIxNQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值