Hacktoberfest 2026:维护者为十月标记出来的 issue,仍然开放、适合新手。 浏览 Hacktoberfest issue

Tracking: replace Create React App with Vite

未关闭
#1,578 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

评估

难度
5/5
预计耗时
一周以上
新手友好度
25/100
Issue 类型
重构
描述清晰度
需要澄清
活跃度
活跃
技术栈
go, react, vite

调研方向

这是一个跟踪 issue,而不是独立的变更;请从子 issue #1579、#1580 和 #1581 开始,并阅读 #1567 中的既有实现回归矩阵。相关入口包括 ui/、ui/static.go、internal/router/ui.go 和 ui/template/header.html。当三个依赖的子变更合入,同时保留所列出的 build、asset、server 和 deployment 契约时,即视为完成。

由索引模型根据 Issue 内容生成。

描述

This is the tracking issue for replacing react-scripts and react-app-rewired with Vite in ui/, opened at maintainer request as the follow-up to #1567. It records scope and constraints only. The work itself lands as three child pull requests, each of which keeps dev buildable on its own.

Why. react-scripts is unmaintained and officially sunset. It sits behind most of the ui/ audit findings and blocks dependency upgrades, and staying on it is the riskier default. #1567 has the full write-up, the regression matrix results, and the measurements.

The series. Each child has its own issue and its own PR against dev. Order matters: 2 depends on 1, 3 depends on 2.

  • Step 1, Go HTML and asset contract: #1579. GetStyle() reads the script and stylesheet tags out of the built index.html from the parsed document (golang.org/x/net/html) instead of a regex pinned to one bundler's tag shape; cssPath becomes a list; ui/template/header.html ranges over the stylesheets; a Go test asserts the parse against the embedded build. Lands while Create React App still builds. Classic defer scripts stay until step 2.
  • Step 2, Vite cutover, atomic: #1580. Vite config, package.json and lockfile, index.html moved to the ui root, Create React App and rewired removed, import.meta.env, router import.meta.glob, require() to ESM, header.html entry script as type="module", plus the two first-paint fixes (plugin i18n init order, bootstrap-icons font path).
  • Step 3, check-ui and small follow-ups: #1581. The make check-ui guard scripts, the locale probe, and the small CSS and route fixes. Not required to boot.

Constraints every step preserves.

Server-side contracts. The build directory stays ui/build, which ui/static.go embeds. Emitted assets stay under static/, which internal/router/ui.go serves as a route, grouped as static/js, static/css, static/media. ui/scripts/env.js remains the single source of truth for configuration shared with the server, the REACT_APP_ prefix included, and its public_url value drives the bundler's base so a non-root ui.public_url keeps every asset reference prefixed. Production sourcemaps stay on. GetStyle() must not depend on tag attribute order, attribute set, or quoting, so the next bundler change cannot silently empty the server-rendered pages again.

Module scripts. After step 2 the entry script served by header.html is an ES module (type="module" crossorigin), matching what the bundler emits in index.html; a module served through a classic script tag fails on its first import. A module script fetches in CORS mode, so any CDN origin serving these files must send the matching CORS headers or the app will not boot even though every request returns 200. Default same-origin deployments are unaffected. The note for CDN users lives only in the CDN plugin READMEs, per the placement decided on #1567: apache/answer-plugins#326. When the version that ships the Vite frontend is cut, its release notes carry a short call-out linking to that README.

i18n init order. i18next attaches its resource-store methods inside init(), while the builtin plugins register their translations during module evaluation. Which runs first is decided by the bundler's chunking, so registration must be correct in either order (immediate when an initialised instance exists, otherwise deferred to the initialized handler). Under the previous toolchain the working order was incidental.

Not in scope for the series. No CI job for the frontend is added; the project runs none today and a build on every push is a cost maintainers should choose to take on. One constraint carries forward for whoever wires it: a bare go test ./... reports ok while asserting nothing about the built asset paths, because the Go test skips when no frontend build is embedded, so a CI job needs to build the frontend first. Migrating the 30 Sass @import uses to @use is a separate change; the pinned sass version stays below the release that starts deprecating them.

Prior art. #1567 is the same change as one PR, reviewed against dev, with the regression matrix (subdirectory deploy, OAuth callbacks, absolute CDN public_url) run and reported in its thread. It stays open only until this issue and the first child PR exist, then closes with a pointer here; its branch stays as reference and the child commits cite their source SHAs. Its measurements, same machine and same Node and package manager versions, clean tree and clean install on both sides, five runs per timing metric:

Metric Before After
Cold production build 19.87s 4.77s
Warm build 8.75s 4.87s
Dev server time to ready 7104ms 359ms
HMR latency 421ms 139ms
Bundle JS, raw / gzip 3477.60KB / 1198.75KB 3010.49KB / 1035.57KB
Bundle total, raw / gzip 4290.39KB / 1652.24KB 3763.97KB / 1474.34KB
Direct dependencies 75 65
Packages installed 1578 689
Audit findings, critical/high/moderate/low 4/78/63/13 1/50/38/6

The caveats attached to those numbers are in #1567 (cold and warm builds equal within noise because the new build has no persistent cache to warm and now type-checks on every build; chunk boundaries differ so bundle rows compare totals; HMR measured once at an earlier head on both toolchains).

主要语言
Go
星标
15.7k
派生
1.4k
平均合并
1 天 20 小时
30 天内合并 PR
6

贡献指南

这个仓库没有索引到贡献指南

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

apache/answer 的其他 Issue

查看 apache/answer 的全部 Issue

相似的 Issue

更多 Go Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。