重构项目计划

[so1ve]

Is your feature request related to a problem? Please describe. 重写整个项目

Describe the solution you'd like

• [x] 替换roadhog至vite / webpack 4+. roadhog 已经太久没人维护了，并且依赖的webpack版本太老。
• [x] 替换dva。使用zustand / jotai / valtio等状态管理库，以及react-router-dom。如果可以，可以使用基于文件路径的路由。（vite-plugin-pages）
• [ ] 使用TS。
• [x] 加入Linter / Formatter。

替换PHP（？），使用更加轻量级的API实现 / 框架 是否需要更换框架？f1music v1使用的是Vue，v2使用的是React，也许我们可以换回Vue？

• [x] 再不济也更新一下Antd：）

[y-young]

1. 替换roadhog至vite / webpack 4+. roadhog 已经太久没人维护了，并且依赖的webpack版本太老。

✔️，可替换为 vite 或 Next.js 等

2. 替换dva。使用zustand / jotai / valtio等状态管理库，以及react-router-dom。如果可以，可以使用基于文件路径的路由。（vite-plugin-pages）

✔️，重构为基于文件路径的路由（vite-plugin-pages 或 vite）；简化状态管理，估计直接使用 SWR 及 context 就足够了

3. 使用TS。

✔️

4. 加入Linter / Formatter。

✔️，原来应该已有 ESLint，优化与项目的整合，结合 Prettier

5. 替换PHP（？），使用更加轻量级的API实现 / 框架

待定，现在后端功能上并没有任何问题，Laravel 作为全栈框架功能上有一定优势，为了降低部署时对服务器性能的要求不建议使用 Java 等资源消耗大的语言，如果要重写建议的备选方案有 Python 及 TypeScript

6. 是否需要更换框架？f1music v1使用的是Vue，v2使用的是React，也许我们可以换回Vue？再不济也更新一下Antd：）

更新 Ant Design ✔️，不建议换回 Vue

建议的前端重构路线图：

1. 升级 Ant Design
2. 重构状态管理，换为 SWR
3. 更换脚手架及包管理工具，使用基于文件路径的路由
4. 加入 TypeScript

[so1ve]

待定，现在后端功能上并没有任何问题，Laravel 作为全栈框架功能上有一定优势，为了降低部署时对服务器性能的要求不建议使用 Java 等资源消耗大的语言，如果要重写建议的备选方案有 Python 及 TypeScript

可以考虑Nest。提出这个需求主要是考虑到减轻服务器负担，社团小鸡性能堪忧 :-(

✔️，原来应该已有 ESLint，优化与项目的整合，结合 Prettier

可以考虑@antfu/eslint-config-react (@so1ve/eslint-config-react) + eslint-plugin-prettier

Next.js

感觉没有必要，太重而且没有SEO需求

[so1ve]

目前我Fork了本项目到社团组织，把webpack迁移到了vite，等下可以考虑发一个PR合进来

[y-young]

可以考虑Nest。提出这个需求主要是考虑到减轻服务器负担，社团小鸡性能堪忧 :-(

现在应该负担也不重，不知道加了 Docker 以后怎么样，之前实测和其他项目共用 2G 内存服务器没有问题，1G 估计也行，主要负担估计在数据库

可以考虑@antfu/eslint-config-react (@so1ve/eslint-config-react) + eslint-plugin-prettier

这个随意，都可

Next.js

感觉没有必要，太重而且没有SEO需求

那 Vite 应该就够

[y-young]

目前我Fork了本项目到社团组织，把webpack迁移到了vite，等下可以考虑发一个PR合进来

我测试的时候貌似跑不起来，现在有不少地方是跟脚手架耦合的，不建议一上来直接换框架

[so1ve]

目前我Fork了本项目到社团组织，把webpack迁移到了vite，等下可以考虑发一个PR合进来

我测试的时候貌似跑不起来

啊这，怎么说，我本地能跑起来（

[so1ve]

现在有不少地方是跟脚手架耦合的，不建议一上来直接换框架

嗯

[y-young]

我测试的时候貌似跑不起来

啊这，怎么说，我本地能跑起来（

那我再看看（

[y-young]

啊这，怎么说，我本地能跑起来（

如果你说构建的话确实能过，然而 pnpm dev 就跑不起来了

[plugin:vite:import-analysis] Cannot import non-asset file /root/f1music/react/node_modules/.pnpm/antd@3.26.20_sfoxds7t5ydpegc3knd667wn6m/node_modules/antd/es/style/index.css which is inside /public.JS/CSS files inside /public are copied as-is on build and can only be referenced via <script src> or <link href> in html.
/root/f1music/react/node_modules/.vite/deps/antd_es_message_style_css__js.js

[so1ve]

啊这，怎么说，我本地能跑起来（

如果你说构建的话确实能过，然而 pnpm dev 就跑不起来了

[plugin:vite:import-analysis] Cannot import non-asset file /root/f1music/react/node_modules/.pnpm/antd@3.26.20_sfoxds7t5ydpegc3knd667wn6m/node_modules/antd/es/style/index.css which is inside /public.JS/CSS files inside /public are copied as-is on build and can only be referenced via <script src> or <link href> in html.
/root/f1music/react/node_modules/.vite/deps/antd_es_message_style_css__js.js

啊好，明天让我看看（）

[so1ve]

pnpm dev 就跑不起来了

好怪，我本地没这个问题(っ °Д °;)っ

$ pnpm list
Legend: production dependency, optional only, dev only

E:\Workspace\f1music\react (PRIVATE)

dependencies:
antd 3.26.20                  babel-plugin-import 1.13.6    dva-loading 2.0.6             raven-js 3.27.2               react-router-dom 6.8.2
aplayer 1.10.1                classnames 2.3.2              moment 2.29.4                 react 17.0.2                  react-transition-group 1.2.1
axios 1.3.4                   dva 2.4.1                     path-to-regexp 6.2.1          react-dom 17.0.2

devDependencies:
@so1ve/eslint-config-react 0.45.2  @vitejs/plugin-react-swc 3.2.0     less 4.1.3                         vite 4.1.4
@types/node 18.14.2                babel-plugin-dva-hmr 0.3.2         redbox-react 1.6.0                 vite-plugin-imp 2.3.1
@types/react 16.14.35              eslint 8.35.0                      rollup-plugin-delete 2.0.0
@types/react-dom 16.9.18           husky 0.12.0                       typescript 4.9.5

$ pnpm -v
7.27.1

$ node -v
v16.18.1

[y-young]

$ pnpm list
Legend: production dependency, optional only, dev only

/root/f1music/react (PRIVATE)

dependencies:
antd 3.26.20                  dva 2.4.1                     react 17.0.2                  
aplayer 1.10.1                dva-loading 2.0.6             react-dom 17.0.2              
axios 0.18.1                  moment 2.29.4                 react-transition-group 1.2.1  
babel-plugin-import 1.13.6    path-to-regexp 6.2.1          
classnames 2.3.2              raven-js 3.27.2               

devDependencies:
@so1ve/eslint-config-react 0.45.2  husky 0.12.0                       
@types/node 18.14.2                less 4.1.3                         
@types/react 17.0.53               redbox-react 1.6.0                 
@types/react-dom 17.0.19           rollup-plugin-delete 2.0.0         
@vitejs/plugin-react-swc 3.2.0     typescript 4.9.5                   
babel-plugin-dva-hmr 0.3.2         vite 4.1.4                         
eslint 8.35.0                      vite-plugin-imp 2.3.1     

$ pnpm -v
7.28.0

$ node -v
v16.19.1

你运行完有打开网页看过吗，打开网页才会报错

[so1ve]

有的，并没有报错

[y-young]

Windows 上 pnpm dev 没有问题，然而构建完用 serve 或者 vite preview 查看的时候会有其他报错……

[so1ve]

Windows 上 pnpm dev 没有问题，然而构建完用 serve 或者 vite preview 查看的时候会有其他报错……

嘶 我看看

好怪，报错了

Uncaught TypeError: Unknown theme type: undefined, name: undefined

要不然先把迁移构建工具搁置了吧，等之后重写的时候再改

[so1ve]

对了，您有详细些的计划表吗？这一学年的校园音乐评选快开始了，要不我们先用旧版本的f1music？

[y-young]

要不然先把迁移构建工具搁置了吧，等之后重写的时候再改

前端貌似没有重写的必要吧？按我之前说的重构路线图做应该就行了

对了，您有详细些的计划表吗？这一学年的校园音乐评选快开始了，要不我们先用旧版本的f1music？

又改回一年一次了么？如果要办的话也只能用旧版了吧，详细计划目前没有，反正不急着上新版，可以慢慢来。现在还没确定分工吧？

[so1ve]

前端貌似没有重写的必要吧？按我之前说的重构路线图做应该就行了

嗯，好的

又改回一年一次了么？如果要办的话也只能用旧版了吧，详细计划目前没有，反正不急着上新版，可以慢慢来。现在还没确定分工吧？

现在来看是的 :/ 那就先用旧版了

[acha666]

可以考虑Nest。提出这个需求主要是考虑到减轻服务器负担，社团小鸡性能堪忧 :-(

其实还行，目前压力不大，实在不行我们还有别的办法，比如说家宽（大雾）之类的

又改回一年一次了么？如果要办的话也只能用旧版了吧，详细计划目前没有，反正不急着上新版，可以慢慢来。现在还没确定分工吧？

是的，因为今年有人手（指年少有为 @so1ve ），本来上学期期末就有这个打算，但是疫情（借口）就没办。

现在的问题是，如果现在办，可能会和下个学年的评选间隔太近，不确定校方怎么看，不过zhp是支持我们现在就办的

[so1ve]

可以考虑Nest。提出这个需求主要是考虑到减轻服务器负担，社团小鸡性能堪忧 :-(

其实还行，目前压力不大，实在不行我们还有别的办法，比如说家宽（大雾）之类的

又改回一年一次了么？如果要办的话也只能用旧版了吧，详细计划目前没有，反正不急着上新版，可以慢慢来。现在还没确定分工吧？

是的，因为今年有人手（指年少有为 @so1ve ），本来上学期期末就有这个打算，但是疫情（借口）就没办。

现在的问题是，如果现在办，可能会和下个学年的评选间隔太近，不确定校方怎么看，不过zhp是支持我们现在就办的

您去友好交流罢（）

[y-young]

现在的问题是，如果现在办，可能会和下个学年的评选间隔太近，不确定校方怎么看，不过zhp是支持我们现在就办的

两次活动还是不要间隔太近吧，不然实际更换完还没放多久又要换了。往年都是在年底办，让投票阶段覆盖元旦假期，希望能增加一点参与人数，现在这个时候办不知道效果如何，尤其现在好像不让带手机了是吧？恐怕参与人数会进一步下降。

[acha666]

现在的问题是，如果现在办，可能会和下个学年的评选间隔太近，不确定校方怎么看，不过zhp是支持我们现在就办的

两次活动还是不要间隔太近吧，不然实际更换完还没放多久又要换了。往年都是在年底办，让投票阶段覆盖元旦假期，希望能增加一点参与人数，现在这个时候办不知道效果如何，尤其现在好像不让带手机了是吧？恐怕参与人数会进一步下降。

其实我的私心是想把这件事在我的任期（高三要跑路了）内搞定（

我觉得如果现在换的话可能会变成1.5年换一次，具体可能要和学校那边商量，我中午去找老师一趟好了

以及如果等到下届，有没有足够的技术力或者人手可能也说不定

手机的话，还是“原则上”不允许，我觉得配合大力宣传应该问题不大，或许可以和清明/端午假期碰一下

话说我们要不要建个群组，issue讨论感觉怪怪的

[y-young]

建议的前端重构路线图：

1. 升级 Ant Design
2. 重构状态管理，换为 SWR
3. 更换脚手架及包管理工具，使用基于文件路径的路由
4. 加入 TypeScript

antd4 分支已经升级到 Ant Design 4.0 了，然而升级到 antd5 的时候就出问题了，推测是 Webpack 版本太低，更新一下重构路线：

• [x] 升级 Ant Design 4
• [x] 重构为函数式组件
• [x] 重构状态管理方式
• [x] 更换脚手架及包管理工具
• [x] 升级 Ant Design 5
• [ ] 加入 TypeScript

[so1ve]

需要帮忙吗？可以承担部分重构任务（）

[y-young]

需要帮忙吗？可以承担部分重构任务（）

你熟悉 React 吗？好像看你不太喜欢 React 的状态管理来着（

这次升级的时候顺带改进了一些功能，希望能在下次活动用上，如果时间充裕的话欢迎，不过自己五年前写的 CSS 实在是无法见人啊（

[so1ve]

你熟悉 React 吗？好像看你不太喜欢 React 的状态管理来着（

这次升级的时候顺带改进了一些功能，希望能在下次活动用上，如果时间充裕的话欢迎，不过自己五年前写的 CSS 实在是无法见人啊（

好啊，很好啊（） 我个人是偏向于用valtio或者resso一类的状态管理，但是如果用swr或者context也可以接受（） react还是比较熟悉的，之前用react和semi-ui写了一个博客后台（）

[y-young]

@so1ve ESLint 配置和加 TypeScript 的工作就交给你了

[so1ve]

@so1ve ESLint 配置和加 TypeScript 的工作就交给你了

彳亍 我找个时间

[y-young]

彳亍 我找个时间

这个不急，可以慢慢来

[so1ve]

彳亍 我找个时间

这个不急，可以慢慢来

嗯，要不然assign我一下？