2.1-frontend.md

2.1 前端技术点¶

2.1.1 前端框架 React¶

本项目使用 React 18 版本，React 主要用于数据展示到界面。

2.1.2 UI 组件库¶

本项目使用 reactstrap 作为 UI 组件库，样式主题色引用 bootstrap 的样式，具体版本如下。

"bootstrap": "^5.2.3",
"reactstrap": "^9.1.5",

reactstrap 组件库和 bootstrap 组件库样式类似，且和 react 框架结合良好，日常使用较多，API 和配置较熟悉，所以选择这个作为组件库，减少了从零开始写 UI 组件消耗的时间成本。

2.1.3 状态管理¶

1、小说内容数据：支持本地上传，或者从服务器搜索加载两种模式。离线模式可以本地上传，上传后以 state 形式保存在 app 中。在线模式中，支持从服务器中查找小说并加载，可以把本地小说上传到服务器。

2、界面样式数据：支持自定义背景图片，背景色，字号，字体，文字颜色，行间隔，保存本地在浏览器存储中。

3、阅读模式数据：模式分为全屏模式、分页模式、章节模式，适合不同类型的小说或者阅读者的需求，界面渲染不同模式的组件。

因为项目数据不复杂，目前使用 React state 进行数据管理，没有使用额外的数据管理库（redux 或者 mobx），未来考虑使用 context、mobx 或 redux 进行状态管理。

2.1.4 移动端¶

目前使用 react-responsive 实现移动端媒体查询，具体移动端 UI 效果和功能待实现。

2.1.5 其他工具库说明¶

本项目还使用了其他第三方工具库，简介如下：

"axios": "^1.2.2" 发送网络请求
"classnames": "^2.3.2", 处理css类名
"deep-copy": "^1.4.2", 深拷贝对象
"is-hotkey": "^0.2.0", 键盘快捷键
"lodash": "^4.17.21", 扩展JS方法
"react-color": "^2.19.3", 自定义颜色选择器
"react-router-dom": "^6.8.1", 浏览器界面路由
"react-scripts": "5.0.1", react开发脚本工具
"react-select": "^5.7.0", 选择框组件
"react-sweet-progress": "^1.1.2", 进度条组件
"react-transition-group": "^4.4.5", 动画效果组件

构建打包工具是 webpack，集成在 react-scripts 库中

// babel es6 转换器
"@babel/cli": "^7.5.0",
"@babel/core": "^7.5.0",
"@babel/node": "^7.5.0",
"@babel/plugin-proposal-class-properties": "7.14.5",
"@babel/plugin-transform-modules-commonjs": "^7.5.0",
"@babel/plugin-transform-runtime": "^7.8.3",
"@babel/preset-env": "^7.5.0",
"@babel/register": "^7.4.4",
"@babel/runtime": "^7.8.3",
"babel-eslint": "10.1.0",
"babel-jest": "27.0.2",
"babel-loader": "8.2.2",
"babel-register": "^6.26.0",

// 代码格式检查工具
"eslint": "^7.32.0",
"eslint-config-airbnb-base": "14.2.1",
"eslint-plugin-import": "2.25.2",

"form-data": "^2.5.1", APIpost表单数据工具
"jsdoc-to-markdown": "^7.1.1" 自动生成文档工具
"localforage": "^1.10.0", 前端存储工具
"match-sorter": "^6.3.1", 数组处理工具
"multer": "^1.4.5-lts.1",
"glamor": "^2.20.40",
"sort-by": "^1.2.0",
"web-vitals": "^2.1.4"

2.1.6 开发问题及解决¶

某些 css 文件不生效¶

检查文件路径没有问题。把这部分代码拷贝到其他能用的代码中，不生效，检查是类名写错了。

reactstrap 样式不生效¶

没有引入 bootstrap.min.css 类

静态资源引用路径¶

静态资源（图片、字体文件）是否需要打包到 JS 中？目前图片已经打包，但是字体图标没有打包，未来图片是否存在无法显示的问题等？

remove useless dependencies¶

run depcheck and get

refrence:

更新后发现报错，原因是 eslint 版本升级造成的，需要更新 eslintrc @babel/eslint-parser 依赖

https://stackoverflow.com/questions/70386909/problem-with-babel-eslint-parsing-error-require-of-es-module

自动生成 eslint 配置文件¶

npm init @eslint/config

参考 https://www.npmjs.com/package/eslint#installation-and-usage