React + Redux 基本框架的搭建以及Demo

Posted birdbird

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了React + Redux 基本框架的搭建以及Demo相关的知识，希望对你有一定的参考价值。

前期准备：

     Node.js version: v10.14.2

步骤：

     1：建立一个空的文件夹，打卡cmd 窗口， 在当前文件夹目录下，运行 npm init, 在文件夹中会生成一个packadge.json 的文件

     2：安装项目依赖项， 包括项目打包工具webpack, babel 编译工具相关包和react 相关的包，依次运行以下命令

            npm install webpack webpack-cli webpack-dev-middleware webpack-hot-middleware webpack-node-externals  babel-loader babel-plugin-transform-export-extensions  html-webpack-plugin source-map-loader @babel/core @babel/preset-env @babel/preset-react --save-dev

          npm install ejs express react react-dom react-helmet redux react-redux

          安装完成后，packadge.json 中出现：

            

"dependencies": {
"@babel/polyfill": "^7.2.5",
"better-npm-run": "^0.1.1",
"ejs": "^2.6.1",
"express": "^4.16.4",
"react": "^16.7.0",
"react-dom": "^16.7.0",
"react-helmet": "^5.2.0",
"react-redux": "^6.0.0",
"redux": "^4.0.1"
},
"devDependencies": {
"@babel/core": "^7.2.2",
"@babel/preset-env": "^7.2.3",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.5",
"babel-plugin-transform-export-extensions": "^6.22.0",
"html-webpack-plugin": "^3.2.0",
"source-map-loader": "^0.2.4",
"webpack": "^4.28.3",
"webpack-cli": "^3.2.0",
"webpack-dev-middleware": "^3.5.0",
"webpack-hot-middleware": "^2.24.3",
"webpack-node-externals": "^1.7.2"
}

    3：配置项目的打包工具（仅供练习使用）

                1： 新建项目文件 webpack.config.js   webpack.dev.config.js    webpack.prod.config.js   和项目入口文件 index.js    index.html

                2： 配置webpack.config.js 

                              配置js 的文件入口， entry 表示webpack 会从这个文件开始根据文件的依赖打包                         

                                                                 entry:{
                                                                        index:‘./index.js‘
                                                                  },
                             配置output, 将webpack打包的js放入output的路径之中
                                                              
                                                                output:{
                                                                      path: path.resolve(__dirname,‘./dist‘),//这个路径额结果 _dirname/dist  _dirname是项目的根目录，一般是packdge.json所在的目录
                                                                      publicPath: ‘/‘,
                                                                      filename: ‘[name].js‘,
                                                                      chunkFilename: ‘[name].js‘
                                                                  },
                              配置js 加载器，js 打包时要使用babel进行解释
                                                               
                                                                   module:{       
                                                                          rules:[      
                                                                                {
                                                                                    test: /.js$/,
                                                                                    loader: ‘babel-loader‘,
                                                                                    exclude: /node_modules/
                                                                                 }
                                                                                  ]
                                                                             }
                            配置文件热加载，在js和html 文件更新时，本地自动更新
                                                                  在插件中加入web-html-plugin
                                                                  
                                                                       new HtmlWebpackPlugin({
                                                                                    filename: ‘index.html‘,//在dist文件中生成文件名为index.html文件
                                                                                    template: ‘./index.ejs‘,//以index.ejs 为模板生成文件
                                                                                     chunks:[‘index‘],// 打包的模块的名字为index, 如果是多文件入口，可以根据模块名来将对应的js插入对应的文件中
                                                                                     inject: true
                                                                                    }),
                                    
                                                                   在插件中加入webpack-dev-middleware  webpack-hot-middleware
                                                                          
                                                                        new webpack.optimize.OccurrenceOrderPlugin(),
                                                                        new webpack.HotModuleReplacementPlugin(),
                                                                        new webpack.NoEmitOnErrorsPlugin()  
 
                         以上是全部webpack.config.js中的内容
                         在webpack.dev.config.js文件中加入
                                                                       
                                                                     var webpack = require(‘webpack‘);           
                                                                     var config =require("./webpack.config");
                                                                     var hotMiddleWareClientPath=‘./dev-client‘;    //热加载的文件
                                                                       Object.keys(config.entry).forEach(function (name, i) { //在入口文件中开头加入./dev-client 路径
                                                                         var extras = [hotMiddleWareClientPath]
                                                                         config.entry[name] = extras.concat(config.entry[name])
                                                                          })
                         在根目录下新建dev-client 文件加入以下内容
                                                                  
                                                                var hotClient = require(‘webpack-hot-middleware/client‘)

                                                                // 订阅事件，当 event.action === ‘reload‘ 时执行页面刷新
                                                                hotClient.subscribe(function (event) {
                                                                if (event.action === ‘reload‘) {
                                                                    window.location.reload()
                                                                     }
                                                                  })
                4  使用express搭建本地server, 代码如下：
                                             
const express = require(‘express‘);
const webpack = require(‘webpack‘);


const app = express();

//in dev env, we need dev/hot middleware
if (process.env.NODE_ENV === ‘development‘) {
const webpackDevMiddleware = require(‘webpack-dev-middleware‘);
//const config = require(‘../config/webpack.config.prod.js‘);
const config = require(‘../webpack.dev.config.js‘);
const compiler = webpack(config);

var hotMiddleware = require(‘webpack-hot-middleware‘)(compiler)
// Tell express to use the webpack-dev-middleware and use the webpack.config.js
// configuration file as a base.
app.use(webpackDevMiddleware(compiler, {
publicPath: config.output.publicPath
}));

app.use(hotMiddleware);

// webpack插件，监听html文件改变事件
compiler.plugin(‘compilation‘, function (compilation) {
compilation.plugin(‘html-webpack-plugin-after-emit‘, function (data, cb) {
// 发布事件
hotMiddleware.publish({ action: ‘reload‘ })
cb()
})
})
}

// Serve the files on port 8800.
app.listen(8800, function () {
console.log(‘Example app listening on port 8800! ‘);
});

//router test
app.get(‘/flowdirector‘,async (req, res, next)=>{
console.log("get test");
});
 
                         此项目 github地址 ： https://github.com/PerficientCecelia/ReactDemo
 

          

         










以上是关于React + Redux 基本框架的搭建以及Demo的主要内容，如果未能解决你的问题，请参考以下文章

react+redux项目框架搭建流程

react搭建一个框架（react-redux-axios-antd Designs）

React +Redux+ Ant Design + echarts 项目实践

redux+flux(一：入门篇)

React16+Redux 实战企业级大众点评WebApp

React16+Redux 实战企业级大众点评WebApp