ychen-z / webpack5-ERP

webpack5、react16 脚手架、redux （根据实际情况可删除）

webpack-learning

注意

项目不再维护，也不再更新

简介

这是一群热爱前端的同学，为了提升平时的开发效率，经过一番精心调研而诞生的一款基于 React + Webpack的前端项目脚手架。

该项目则是站在业务层的角度，对该 SDK 进行较为通用性的封装。

为什么会有这个项目？

• 以前没有项目脚手架
• 原项目中使用的包版本过低
• 原项目开发（编译/打包）效率欠佳
• 不支持 React 16、Webpack 4 等主流工具的新版本/特性

目前已支持

• React v16.9.0
• Webpack v4.39.1
• 校验工具：ESLint & Stylelint & Prettier
• Husky
• DLL 动态链接库
• axios 目录结构整理
• 支持全局引入 variables.less & antd-reset.less

TODO

• proxy 整理
• redux & reducer 整理
• routes 目录结构整理
• 组件目录结构整理
• webpack 多入口配置
• 引入 TypeScript（待定）
• 等...

使用方式

// Install all npm packages
1 、yarn install
// or
npm install

2、yarn build-vendor

3、yarn start

4、yarn build

目录结构

project
│   README.md
│   .babelrc
│   .eslintrc.js
│   .prettierrc.js
│   .stylelintrc.js
│
└───config // webpack、dll配置
│   │   webpack.base.js
│   │   webpack.config.dev.js
│   │   webpack.config.prod.js
│   │   ...
│
└───src // 项目源文件
│   │   App.js
│   │   index.js
│   │   Page.js
|   |
|   |____components // 组件
│   |   |____common // 通用组件
│   |   |    |   ...
│   |   |
│   |   | ... // 业务组件
|   |
|   |____view // 页面
|   |
|   |____axios // 请求
|   |   | api // 接口
|   |   | tools.js // axios二次封装
|   |   | config.js // 接口环境变量
|   |
|   |____routes // 路由
|   |   | index.js
|   |
|   |____store // reducer
|   |   | action
|   |   | reducer
|   |
|   |____utils // 工具函数
|   |   | tool.js
|
└───public
│   │   index.html

更新历史

• v0.0.1 —— 2019-08-20

  • 模板项目雏形
  • 引入 hooks 参考 doc/hook.md
  • 优化axios目录结构

• v0.0.2 —— 2019-08-21

  • 优化axios，对Server错误进行统一处理
  • 语义化Server Code
  • 支持全局引入"variables.less"

• v0.0.3 —— 2019-08-27

  • 优化axios响应拦截器，直接返回response.data至业务层

• v0.0.4 —— 2019-08-28

  • 增加全局样式
  • 优化布局方案
  • 国际化方案

License

The code is distributed under the MIT license