[JavaScript知识库] webpack项目篇（六十六）：react 全家桶和 webpack 开发 h5 商城项目的整体思路

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> webpack项目篇（六十六）：react 全家桶和 webpack 开发 h5 商城项目的整体思路 -> 正文阅读

[JavaScript知识库]webpack项目篇（六十六）：react 全家桶和 webpack 开发 h5 商城项目的整体思路

说明

玩转 webpack 学习笔记

商城技术栈选型

前端：

react 全家桶 + webpack + axios + lib-flexible + slick-carousel

后端：

koa + mysql + sequelize

商城架构设计

在这里插入图片描述

商城界面 UI 设计

在这里插入图片描述

React 全家桶环境搭建

1、初始化项目

npm init -y

2、创建项目目录

创建 actions、reducers、store 等

src/actions/ 放置所有的 actions
src/reducers 放置所有的 reducers
使用 Provider 传递 store，Store 通过 Provider 传递给容器组件

在这里插入图片描述

3、安装依赖

安装 react、react-dom、redux、react-redux

npm i react react-dom redux react-redux -S

安装 @babel/core

npm i @babel/core -D

安装 geektime-builder-webpack 用于 webpack 的配置

npm i geektime-builder-webpack -D

这里的脚本都是用的 builder-webpack-geektime 里面的

package.json：

{
  "name": "shopping-h5",
  "version": "1.0.0",
  "description": "shopping h5",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --config ./node_modules/builder-webpack-geektime/lib/webpack.dev.js --open",
    "build": "webpack --config ./node_modules/builder-webpack-geektime/lib/webpack.prod.js",
    "build:ssr": "webpack --config ./node_modules/builder-webpack-geektime/lib/webpack.ssr.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "axios": "^0.19.0",
    "lib-flexible": "^0.3.2",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-redux": "^7.1.0",
    "react-slick": "^0.25.2",
    "redux": "^4.0.4",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0",
    "slick-carousel": "^1.8.1"
  },
  "devDependencies": {
    "@babel/core": "^7.4.4",
    "@babel/plugin-proposal-class-properties": "^7.5.5",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/preset-env": "^7.4.4",
    "@babel/preset-react": "^7.0.0",
    "builder-webpack-geektime": "^1.0.3",
    "webpack": "^4.31.0",
    "webpack-cli": "^3.3.2",
    "webpack-dev-server": "^3.3.1"
  }
}