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

  • Post author:
  • Post category:其他


运营后台服务器架构


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)



版权声明:本文为lpf1215原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。