React + Redux 基本框架的搭建以及Demo
发布时间：2020-12-15 20:37:03 所属栏目：百科 来源：网络整理
导读：前期准备： ? ? ?Node.js version: v10.14.2 步骤： ? ? ?1：建立一个空的文件夹，打卡cmd 窗口， 在当前文件夹目录下，运行 npm init,在文件夹中会生成一个packadge.json 的文件 ? ? ?2：安装项目依赖项， 包括项目打包工具webpack,babel 编译工具相关包和r
|
前期准备： ? ? ?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 ? ? ? ? ? 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
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |