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

2019-01-08 08:23:14来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

前期准备:

     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!\n');
});

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

          

         

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:js中常用的算法排序

下一篇:js 正则表达式之环视结构