Skip to content

Commit 6f20c0b

Browse files
lucienshawlsAnnAngelaCopilot
authored
build: 拥抱esm新规范和tailwind新版本 (#202)
1. package.json 中添加 type: module，默认视为 ESM - 现在 js 文件默认视为 esm 而非之前的 cjs，故重命名相关文件，更改扩展名 - 更改所有的 js 文件的语法，适配 ESM 规范（这还包括 eslint 和 prettier 等的配置文件） - 更改 package 元数据 2. 升级 tailwindcss 到 v4，并适应新版本的以下破坏性更新： - 使用官方升级工具，自动对部分过时的 class 名称进行修改 - 更改了其与 postcss 和 vite 的集成方式 - 其默认支持 autoprefixer，移除 postcss 的对应插件 - 边框的默认颜色被修改，经检查仓库中每处 border 都指定了颜色，无需适应此改动 - css 的 hidden 不再被 flex/block 覆盖，导致友链的消失动画出现异常，已移除 css 对显隐的控制备份 - 鼠标指针悬浮在按钮上的默认图标被修改，已添加设置覆盖（新版默认为平常状态的指针，现改回了手型） - 不再推荐使用 `tailwind.config.js` 作为配置文件，已删除 - 上述配置文件中，有两个关键设置： - 设置了暗黑模式的切换方式，已在 css 中用推荐方法配置（但引入了非css标准语法，导致编辑器警告） - 设置了过渡动画的默认持续时间，经检查所有切换动画都原地手动指定了持续时间，默认值从未被使用，无需适配 3. 更新 devcontainer 环境 - 引入新扩展：ES7+ React/Redux/React-Native snippets - 引入新扩展：Tailwind CSS IntelliSense - 使默认 css 检查器忽略特定类型的警告（解决因设置暗黑模式切换方式导致的警告） - 调整 pnpm 的安装时机，原本作为镜像构建的一部分，现移到安装后脚本中（后者可与仓库文件交互，前者不行） 4. 更新构建方法 - pnpm 不需要 corepack（自己就有版本控制），因此仅调整 devcontainer 中，pnpm 的安装时机 5. 更新部分依赖的版本 6. 更新文档 7. 修复 eslint 报错 8. 更新工作流 - 不允许非 dev 分支的 push 触发工作流 - 允许由 pr 触发工作流检查 - 非手动运行时额外进行 eslint 代码格式检查，但不因此使工作流失败，出错时设置警告 * build: 拥抱esm * build: 类型定义全局化 * build: minor dep updates * build: update tailwindcss to v4 * chore: 更新devcontainer开发环境配置 * chore: 简化devcontainer配置流程 * build: update deps to latest (BOLD!) * build: 构建脚本微调 * chore: 移除子目录中的gitignore * chore: 合并eslint配置 * style: 格式化并修改部分文档 * chore: eslint取消接管js系列文件 * fix: 修复可能的级联渲染问题 * fix: 修复react-hooks依赖数组不完整的问题 * ci: Add CI workflow configuration for GitHub Actions * ci: Add pnpm setup step to CI workflow * ci: Update pnpm action to remove version specification Removed the latest version specification for pnpm. * style: prettier fix * ci: 允许由pr触发构建 * ci: 添加lint检查但不因此中断 * ci: remove duplicate * refactor: 移除不兼容tailwind v4的被注释的代码 Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> * ci: 非dev分支的push不触发工作流 * chore: 修复pre-commit配置 * ci: 工作流中移除prettier检查，并添加警告 * chore: update package metadata * build: 将vite移动到dev依赖 --------- Co-authored-by: AnnAngela <naganjue@vip.qq.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
1 parent 11c205f commit 6f20c0b

28 files changed

+1293
-1339
lines changed

‎.devcontainer/Dockerfile‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎.devcontainer/devcontainer.json‎

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,9 @@
11
// For format details, see https://aka.ms/devcontainer.json. For config options, see the
22
// README at: https://github.com/devcontainers/templates/tree/main/src/javascript-node
33
{
4-
"name": "Node.js",
4+
"name": "MAA Website Env",
55
// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
6-
// "image": "mcr.microsoft.com/devcontainers/javascript-node:24",
7-
"build": {
8-
"dockerfile": "Dockerfile"
9-
},
6+
"image": "mcr.microsoft.com/devcontainers/javascript-node:24",
107

118
// Features to add to the dev container. More info: https://containers.dev/features.
129
// "features": {},
@@ -15,21 +12,33 @@
1512
"forwardPorts": [3000],
1613

1714
// Use 'postCreateCommand' to run commands after the container is created.
18-
"postCreateCommand": "pnpm install --recursive --frozen-lockfile",
15+
"postCreateCommand": "bash .devcontainer/post-create.sh",
1916

2017
// Configure tool-specific properties.
2118
"customizations": {
2219
"vscode": {
2320
"extensions": [
2421
"mkxml.vscode-filesize",
2522
"esbenp.prettier-vscode",
26-
"dbaeumer.vscode-eslint"
23+
"dbaeumer.vscode-eslint",
24+
"dsznajder.es7-react-js-snippets",
25+
"bradlc.vscode-tailwindcss"
2726
],
2827
"settings": {
29-
"editor.defaultFormatter": "esbenp.prettier-vscode",
28+
// Color theme
29+
"workbench.colorTheme": "Default Dark Modern",
30+
31+
// Editor formatting
3032
"editor.formatOnSave": true,
33+
"editor.defaultFormatter": "esbenp.prettier-vscode",
34+
"prettier.configPath": "./.prettierrc",
3135
"eslint.format.enable": true,
32-
"prettier.configPath": "./.prettierrc"
36+
"css.lint.unknownAtRules": "ignore",
37+
38+
// Performance optimizations
39+
"search.exclude": {
40+
"**/node_modules": true
41+
}
3342
}
3443
}
3544
}

‎.devcontainer/post-create.sh‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
#!/bin/bash
2+
WORKSPACE=$(pwd)
3+
4+
echo "===================="
5+
cd "$WORKSPACE"
6+
echo "Installing node modules..."
7+
npm install -g pnpm
8+
pnpm install --recursive --frozen-lockfile

‎.github/workflows/deploy.yml‎

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@ name: Website Workflow
22

33
on:
44
push:
5+
branches:
6+
- dev
7+
pull_request:
58
workflow_dispatch:
69
inputs:
710
deploy-to-prod:
@@ -16,9 +19,10 @@ jobs:
1619
timeout-minutes: 20
1720
runs-on: ubuntu-latest
1821
steps:
19-
- name: Check out code
22+
- name: Checkout repository
2023
uses: actions/checkout@v5
2124
with:
25+
fetch-depth: 0
2226
show-progress: false
2327

2428
- name: Install pnpm
@@ -27,15 +31,22 @@ jobs:
2731
# version: 10 # Already specified in package.json
2832
run_install: false
2933

30-
- name: Setup Node.js environment
34+
- name: Setup node.js environment
3135
uses: actions/setup-node@v5
3236
with:
3337
node-version: 24
3438
cache: pnpm
3539
cache-dependency-path: "./pnpm-lock.yaml"
3640

37-
- name: Install dependencies
38-
run: pnpm install --frozen-lockfile
41+
- name: Install node modules
42+
run: pnpm install --recursive --frozen-lockfile
43+
44+
- name: Lint check
45+
if: ${{ inputs.deploy-to-prod != true }}
46+
run: |
47+
pnpm lint:code || {
48+
echo "::warning title=Lint Check::ESLint reported issues. Please fix them before deploying to production."
49+
}
3950
4051
- name: Build
4152
run: pnpm run build

‎.pre-commit.prettierrc.cjs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@ const path = require('path')
44
const prettierJsonPath = path.resolve('./.prettierrc')
55
const prettierJson = JSON.parse(fs.readFileSync(prettierJsonPath, 'utf-8'))
66

7-
const plugins = (prettierJson.plugins || []).map((p) => require(p))
7+
const modules = (prettierJson.plugins || []).map((p) => require(p))
88

99
module.exports = {
1010
...prettierJson,
11-
plugins: plugins,
11+
plugins: modules,
1212
}

‎README.md‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,24 +3,27 @@
33
- 官网首页: [maa-website（本仓库）](https://github.com/MaaAssistantArknights/maa-website) -> <https://maa.plus>
44
- 文档站: [MAA主仓库/docs](https://github.com/MaaAssistantArknights/MaaAssistantArknights/tree/dev/docs) -> <https://docs.maa.plus>
55

6-
> 注意：文档站的评论区使用此仓库的 Discussions
6+
> 注意：文档站的评论区使用此仓库的 [Discussions](https://github.com/MaaAssistantArknights/maa-website/discussions)
77
88
## Project Overview
9+
910
### Project Components
1011

1112
- `apps/web` MAA official website, build with `React`, host path `/`
1213

1314
### Prerequisites
1415

15-
- Node.js `^24.4.1`
16-
- pnpm `^10.17.0`
16+
- Node.js `24`
17+
- pnpm
1718

1819
## Development
20+
1921
### 1. Set Up the Environment
2022

2123
Choose *ONE* of the following methods to set up your environment:
2224

2325
#### Local Clone
26+
2427
Please [Install Node.js](https://nodejs.org/en/download) first, then install dependencies using `pnpm` in the *ROOT* directory:
2528

2629
```shell
@@ -32,7 +35,7 @@ pnpm install --frozen-lockfile --recursive
3235

3336
Open this repository in GitHub Codespaces. Once it's ready, the environment will be set up automatically.
3437

35-
[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg?color=green)](https://codespaces.new/MaaAssistantArknights/maa-website)
38+
[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MaaAssistantArknights/maa-website)
3639

3740
### 2. Run the Development Server
3841

@@ -45,6 +48,7 @@ pnpm dev
4548
- `apps/web` will be hosted on `http://localhost:3000`
4649

4750
### 3. Lint Code
51+
4852
#### General Overview
4953

5054
1. Prettier (global)

‎apps/web/.gitignore‎

Lines changed: 0 additions & 24 deletions
This file was deleted.

‎apps/web/eslint.config.js‎

Lines changed: 37 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,56 @@
1-
const { defineConfig, globalIgnores } = require('eslint/config')
2-
const js = require('@eslint/js')
3-
const { FlatCompat } = require('@eslint/eslintrc')
1+
import typescriptPlugin from '@typescript-eslint/eslint-plugin'
2+
import typescriptParser from '@typescript-eslint/parser'
43

5-
const compat = new FlatCompat({
6-
baseDirectory: __dirname,
7-
recommendedConfig: js.configs.recommended,
8-
allConfig: js.configs.all,
9-
})
4+
import prettierPlugin from 'eslint-plugin-prettier'
5+
import reactPlugin from 'eslint-plugin-react'
6+
import reactHooksPlugin from 'eslint-plugin-react-hooks'
7+
import { defineConfig, globalIgnores } from 'eslint/config'
108

11-
module.exports = defineConfig([
9+
export default defineConfig([
1210
globalIgnores(['**/dist/', '**/node_modules/', '**/build/']),
11+
12+
// React + TypeScript
1313
{
14-
files: ['**/*.ts', '**/*.tsx'],
14+
files: ['**/*.{,m,c}ts{,x}'],
1515
languageOptions: {
16-
parser: require('@typescript-eslint/parser'),
16+
ecmaVersion: 'latest',
17+
sourceType: 'module',
18+
parser: typescriptParser,
1719
parserOptions: {
18-
project: './tsconfig.json',
19-
tsconfigRootDir: __dirname,
20+
project: ['./tsconfig.json'],
21+
tsconfigRootDir: import.meta.dirname,
2022
ecmaFeatures: { jsx: true },
21-
sourceType: 'module',
2223
},
23-
globals: {},
2424
},
25-
extends: compat.extends(
26-
'prettier',
27-
'plugin:react/recommended',
28-
'plugin:@typescript-eslint/recommended',
29-
),
30-
settings: {
31-
react: {
32-
version: 'detect',
33-
jsxRuntime: 'automatic',
34-
},
25+
26+
plugins: {
27+
'@typescript-eslint': typescriptPlugin,
28+
react: reactPlugin,
29+
'react-hooks': reactHooksPlugin,
30+
prettier: prettierPlugin,
3531
},
32+
3633
rules: {
37-
'react/jsx-key': 'off',
38-
'react/react-in-jsx-scope': 'off',
39-
// 所有引用了@react-three/fiber的文件，在文件中单独禁用这个规则
40-
// 方法是使用文件头标记 /* eslint-disable react/no-unknown-property */
41-
// 'react/no-unknown-property': 'off',
34+
/** TypeScript 推荐规则 */
35+
...typescriptPlugin.configs.recommended.rules,
36+
37+
/** React 推荐规则 */
38+
...reactPlugin.configs.recommended.rules,
39+
40+
/** React Hooks 推荐规则 */
41+
...reactHooksPlugin.configs.recommended.rules,
42+
43+
/** Prettier 规则 */
44+
'prettier/prettier': ['warn'],
45+
46+
/** 自定义项目偏好 */
47+
'react/react-in-jsx-scope': 'off', // React 17+ 不需要
4248
},
43-
},
44-
{
45-
files: ['**/*.js', '**/*.jsx'],
46-
extends: compat.extends('prettier', 'plugin:react/recommended'),
49+
4750
settings: {
4851
react: {
4952
version: 'detect',
50-
jsxRuntime: 'automatic',
5153
},
5254
},
53-
rules: {
54-
'react/jsx-key': 'off',
55-
'react/react-in-jsx-scope': 'off',
56-
},
5755
},
5856
])

‎apps/web/package.json‎

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
{
22
"name": "website",
33
"version": "1.0.0",
4-
"description": "Maa website - main website",
5-
"main": "index.js",
6-
"repository": "https://github.com/MaaAssistantArknights/maa-website",
7-
"license": "AGPL-3.0-or-later",
4+
"description": "MAA official website",
5+
"type": "module",
6+
"private": true,
87
"scripts": {
98
"dev": "vite",
109
"build": "tsc && vite build",
@@ -16,43 +15,44 @@
1615
"dependencies": {
1716
"@iconify/icons-mdi": "^1.2.48",
1817
"@iconify/react": "^6.0.2",
19-
"@octokit/types": "^15.0.0",
18+
"@octokit/types": "^16.0.0",
2019
"@react-three/drei": "^10.7.6",
21-
"@react-three/fiber": "^9.3.0",
20+
"@react-three/fiber": "^9.4.0",
2221
"@react-three/postprocessing": "^3.0.4",
23-
"@sentry/react": "^10.12.0",
22+
"@sentry/react": "^10.22.0",
2423
"clsx": "^2.1.1",
25-
"framer-motion": "^12.23.14",
26-
"i18next": "^25.5.2",
24+
"framer-motion": "^12.23.24",
25+
"i18next": "^25.6.0",
2726
"i18next-browser-languagedetector": "^8.2.0",
2827
"moment": "^2.30.1",
2928
"postprocessing": "^6.37.8",
30-
"react": "^19.1.1",
31-
"react-dom": "^19.1.1",
29+
"react": "^19.2.0",
30+
"react-dom": "^19.2.0",
3231
"react-ga-neo": "^2.2.0",
33-
"react-i18next": "^15.7.3",
32+
"react-i18next": "^16.2.3",
3433
"react-use": "^17.6.0",
3534
"swr": "^2.3.6",
36-
"three": "^0.180.0",
37-
"vite": "^7.1.6"
35+
"three": "^0.180.0"
3836
},
3937
"devDependencies": {
4038
"@eslint/eslintrc": "^3.3.1",
41-
"@eslint/js": "^9.35.0",
42-
"@types/node": "^24.5.2",
43-
"@types/react": "^19.1.13",
44-
"@types/react-dom": "^19.1.9",
39+
"@tailwindcss/postcss": "^4.1.16",
40+
"@tailwindcss/vite": "^4.1.16",
41+
"@types/node": "^24.10.0",
42+
"@types/react": "^19.2.2",
43+
"@types/react-dom": "^19.2.2",
4544
"@types/three": "^0.180.0",
46-
"@typescript-eslint/eslint-plugin": "^8.44.0",
47-
"@typescript-eslint/parser": "^8.44.0",
48-
"@vitejs/plugin-react": "^5.0.3",
49-
"autoprefixer": "^10.4.21",
50-
"eslint": "^9.35.0",
51-
"eslint-config-prettier": "^10.1.8",
45+
"@typescript-eslint/eslint-plugin": "^8.46.2",
46+
"@typescript-eslint/parser": "^8.46.2",
47+
"@vitejs/plugin-react": "^5.1.0",
48+
"eslint": "^9.39.0",
49+
"eslint-plugin-prettier": "^5.5.4",
5250
"eslint-plugin-react": "^7.37.5",
51+
"eslint-plugin-react-hooks": "^7.0.1",
5352
"postcss": "^8.5.6",
5453
"rollup-plugin-analyzer": "^4.0.0",
55-
"tailwindcss": "^3.4.17",
56-
"typescript": "^5.9.2"
54+
"tailwindcss": "^4.1.16",
55+
"typescript": "^5.9.3",
56+
"vite": "^7.1.12"
5757
}
5858
}

‎apps/web/postcss.config.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
module.exports = {
1+
export default {
22
plugins: {
3-
tailwindcss: {},
4-
autoprefixer: {},
3+
'@tailwindcss/postcss': {},
54
},
65
}

0 commit comments

Comments
 (0)