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

女爷i 2022-07-13 19:17 106阅读 0赞

#### 运营后台服务器架构 ####

*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)