pdsuwwz / react-app

react16 + react-router + react-redux + webpack4 + express 脚手架

react app ·

💡 该项目技术栈过旧，现已使用 vite 重写 👉 请移步此仓库查看最新进展 📦 vite-react-starter

react 前端项目架构的基本搭建，若本项目有帮到你，可以赏个 star 哈 ✨

使用技术：

react16 + react-router4 + react-redux + babel7 + webpack4 + express

开发文档：

// 安装依赖
npm install OR yarn install

---

// 测试环境
npm run dev

// 生产环境
npm run build

OR

// 直接使用 WDS 
npm start

目录结构

├── build                          打包配置，这里包括了抽离库的配置（ dll 配置）
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js
│   ├── webpack.prod.conf.js
│   └── webpack.dll.conf.js
├── .babelrc                       babel 配置
├── .eslintignore                  eslint 忽略检测的代码
├── .eslintrc.js                   eslint 配置项
├── bundle-config.json             第三方库自动插入模板文件配置
├── index.js                       服务开启入口
├── package.json
├── postcss.config.js              css 规范化配置
├── public                         打包后的文件目录
│   ├── bundle.css
│   ├── bundle.js
│   └── index.html
├── src                            源文件目录
│   ├── common                     公共方法及配置
│   │   ├── base.js
│   │   ├── config.js
│   │   └── utils.js
│   ├── script                     核心代码
│   │   ├── actions                action creator
│   │   ├── components             react 组件
│   │   ├── constants              存放 action 所需常量
│   │   ├── container              redux 容器组件
│   │   ├── middleware             中间件配置
│   │   ├── reducers               state 处理函数
│   │   ├── routes                 路由配置
│   │   ├── store.js               存放 state 的对象配置，核心
│   │   └── app.js                 webpack 入口文件
│   ├── server                     静态服务渲染
│   │   └── index.js
│   └── styles                     暂定为公共 css
│       └── common.scss
├── vendor                         抽离的公共库目录
│   └── dll
│       ├── vendor-manifest.json
│       └── vendor.xxx.dll.js
└── templates                      总模板渲染文件
    └── index.html

注：控制台执行命令 tree -I '*node_module*' -L 3 可以生成目录结构

react-app's Issues

【已解决】如何更优雅的使用 css-modules

目前 JSX 中 css 是这样引入的

import cssObj from './style.scss'

<p className={cssObj.title}>Hello World</p>

这种使用方式至少会产生两种不好的影响：

1. 代码可读性变差
2. 代码冗余，增加了 JSX 的复杂度

虽然大大降低了全局 css 污染的问题，但是这样写对我们来说是极其地不方便。。
那我们能不能换一种方式来解决 css modules 的问题呢？要既能保证方便书写又要让代码可读性变高？

增加 eslint 代码检测机制

【已解决】执行 npm run dev 不能单独生成依赖库，导致 bundle 文件依然较大

【已解决】'NODE_ENV' 不是内部或外部命令，也不是可运行的程序

在 windows 环境中执行 npm 打包命令时，出错

'NODE_ENV' 不是内部或外部命令，也不是可运行的程序

css-modules 公共样式需要提前加载，否则会导致样式无法被覆盖等问题

记录一个问题，安装 node-sass 依赖可能会引发超时或安装失败等错误问题

报类似这样的错误提示

error \Antd-app\node_modules\node-sass: Command failed.
Exit code: 1
Command: node scripts/build.js
Arguments:
Directory: \Antd-app\node_modules\node-sass
Output:
Building: \version_nodejs\node.exe \Antd-app\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
gyp info it worked if it ends with ok
gyp verb cli [ '\\version_nodejs\\node.exe',
gyp verb cli   '\\node_modules\\node-gyp\\bin\\node-gyp.js',
gyp verb cli   'rebuild',
gyp verb cli   '--verbose',
gyp verb cli   '--libsass_ext=',
gyp verb cli   '--libsass_cflags=',
gyp verb cli   '--libsass_ldflags=',
gyp verb cli   '--libsass_library=' ]
gyp info using [email protected]
gyp info using [email protected] | win32 | x64
gyp verb command rebuild []
gyp verb command clean []
gyp verb clean removing "build" directory
gyp verb command configure []
gyp verb check python checking for Python executable "python2" in the PATH
gyp verb `which` failed Error: not found: python2
...
gyp verb `which` failed   code: 'ENOENT' }
gyp verb check python checking for Python executable "python" in the PATH
gyp verb `which` failed Error: not found: python
...

几种解决方案：

1. npm 配置淘宝镜像源
2. 使用 cnpm
3. 实在不行就搭梯子喽

【已解决】postcss 和 css-modules 不能同时生效

【已解决】图片引用的相对路径失效及 WDS 热更新 Maximum call stack size exceeded

引入图片为相对路径时，报错：

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js)
ModuleNotFoundError: Module not found: Error: Can't resolve 'assets/xxx.png' in ...

---

启用 WDS 后，再修改文件，浏览器控制台，报错：

Maximum call stack size exceeded

【已解决】可能导致 eslint rules 失效的原因

最近发现不论如何配置 eslint 的 rules, 打包后的 warning 和 error 信息都是相同的,
于是检查 eslintrc.js的配置 , 但是并没有找到不合理的地方，于是猜测是其他配置文件出了问题。

【已解决】增加 prod 、dev 环境及抽离出 base 公共配置

目前只有 dev 环境，
现在是每次切换环境都需要修改唯一的配置文件 webpack.config.js，效率太低，
所以还需要增加一个 prod 环境，这样就可以通过执行 cli 命令指定不同的配置来运行不同的环境