es6-react-template

刘星玲 ES6 React 项目模板

⛰️ 能力支持

• React: 前端页面展示框架；
• Redux：状态管理；
• React Router：前端路由；
• Connected React Router：支持将 Redux 与 React Router 进行绑定；
• Express 服务端；
• TypeScript 类型检查；
• Webpack 打包构建工具；
• Babel：ES6+ 转 ES5 工具；
• nodemon：监测 Node 应用变化时，自动重启服务器；
• axios 基于 Promise 的 HTTP 客户端；
• react-helmet：在客户端及服务端上管理标题、meta、样式和脚本标签；
• loadable-component：支持组件的懒加载；
• Webpack Dev Middleware：通过 Express 服务器提供 webpack 服务；
• Webpack Hot Middleware：支持基于 Express 的热更新；
• Webpack Bundle Analyzer：打包分析工具；
• morgan：服务器日志；
• terser-webpack-plugin：压缩 JS ；
• css-minimizer-webpack-plugin：压缩 CSS；

🛡️ 配置要求

• node >= 12.0
• npm >= 6.0

🔨 如何使用

1.下载代码仓库，执行如下指令

git clone [email protected]:encode-studio-fe/es6-react-template.git
cd es6-react-template

2.安装依赖

前提条件：使用最新版本的 pnpm

pnpm run init # pnpm install

3.执行指令

pnpm run build  # 打包依赖
pnpm run start  # 运行生产环境下的服务端

打开 http://localhost:8080

注意：如果想切换端口号，请在 ./src/config中修改。

🚀 运行指令

使用cross-env提供跨平台的设置及环境变量：

| pnpm run <script> | 描述 | | ------------------- | ------------------------------------------------------ | | dev | 在localhost:3000端口号上运行，并支持 HMR | | dev:build | 在开发模式下打包至 ./public/server | | start | 在生成环境下启动服务器，在localhost:8080端口号上运行 | | build | 打包客户端和服务器端代码 | | build:server | 打包服务器端代码，并置于 ./public/server | | build:client | 打包客户端代码，并置于 ./public/assets | | analyze:server | 服务器端代码打包内容可视化 | | analyze:client | 客户端代码打包内容可视化 |