【源码】基于 React 和 Redux 的 Spinacia 开发脚手架

项目简介

Spinacia React Redux 是旧版本 React 脚手架的升级版本。升级后的脚手架在本地服务启动速度、打包后文件大小和浏览器加载速度等方面均有提升，支持使用 React 16 和 Webpack 4 的新特性进行开发，且目录结构及开发方式尽量与旧版保持一致，多数文件可直接复制使用。

项目的主要特性和功能

特性

1. 首次内容渲染加载提示：利用 webpack 的 html-webpack-plugin 插件配置加载 loading，首屏体积加载完成时渲染 loading，js 加载完成后销毁 loading 进行首次内容渲染，减少白屏时间，提升用户体验。
2. 分离打包：使用 optimization.splitChunks 将框架代码抽离为 vendors.[hash].js，node_modules 依赖抽离为 dependencies.[hash].js，未修改代码时文件名 hash 不变，可利用浏览器缓存提高加载性能。
3. 代码规范检查与自动修复：使用 Eslnt 规范代码，在 vscode 中安装 eslint 插件并设置 eslint.autoFixOnSave 为 true，保存代码时可自动修复部分 eslint 检测出的错误。

功能

支持使用 React 16+、Webpack 4.0+、React Router 4.0+、Redux 4.0+ 进行项目开发。

安装使用步骤

安装

1. 确保 npm 版本为 5.2+ 及更高，可运行 npm i -g npm 进行更新。
2. 执行以下命令创建项目：
   • npx spinacia-cli，会在当前文件夹下创建名为 spinacia-react-redux 的目录。
   • npx spinacia-cli <folder name>，会在当前文件夹下创建指定名称的目录。
3. 进入项目目录：
   • cd spinacia-react-redux
   • 或 cd <folder name>

开发模式

运行 npm start，在开发模式下启动应用，打开 http://localhost:3000 可在浏览器中查看应用。对代码进行编辑后页面会自动重新加载，同时控制台会显示任何 lint 错误。

生产模式

运行 npm run build，将应用打包到 dist 文件夹，此模式会正确打包 React 并优化构建以获得最佳性能，打包后的文件会进行压缩，文件名包含哈希值，可直接部署应用。

升级 webpack5 注意事项

1. TypeError 问题：若出现 webpack5 TypeError: Cannot add property htmlWebpackPluginAlterChunks, object is not extensible 错误，执行 yarn add --dev html-webpack-plugin 解决。
2. 配置 resolve.alias：需进行相应配置。
3. url-loader 配置：文件小于字节限制时可返回 DataURL，CSS loader 把非根路径的 url 解释为相对路径，加 ~ 前缀才会解释成模块路径，如 url("~@/image/avatar.jpeg")。

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】