Vocawiki前端代码库

开发步骤

如果你没有开发环境

以下教程面向的是纯小白，如果你有不同见解，按你的方法做既可。

1. 安装Git。如果你不使用Git Bash，你需要将可执行文件git加入PATH环境变量。

2. 安装Node.js。

   Windows用户注意不要被上面的Docker唬住了，下载下面的“Windows 安装程序(.msi)”或“独立文件(.zip)”（后者需要手动设置PATH环境变量）。

3. 安装Visual Studio Code。

4. 克隆仓库：

   git clone https://github.com/Vocawiki/wiki-frontend.git vocawiki-frontend

   或使用可视化工具克隆，如Visual Studio Code、GitHub Desktop。

5. 安装包管理器pnpm。在项目根目录运行：

   corepack install

1. 安装依赖：

   pnpm i

   Bun的包管理器bug太多了，暂时不用。

2. 修改代码。

3. 执行提交前的任务，确保没有报错：

   pnpm run before-commit

   此命令实际一次性完成了三个任务：

   1. 格式化代码：

      pnpm run format

   2. 检查代码问题：

      pnpm run check

   3. 尝试构建：

      pnpm run build

4. 提交、推送代码。提交前需确保完成第3步。

项目结构

• src/：用于站内的代码。
  • gadgets/：
    • (meta).ts：定义了所有可用的gadget的分组、顺序，将部署到[[MediaWiki:Gadgets-definition]]。
    • <gadget名>/
      • (meta).ts：定义了该gadget的信息，用于[[MediaWiki:Gadgets-definition]]中属于该Gadget的一行。参见GadgetMeta的类型定义，文档注释写得很详细。
      • <源代码文件>：目前只能是SCSS文件，入口文件需要在./(meta).ts中指定。
  • widgets/：
    • <widget名>/：将部署到[[Widget:<widget名>]]。
      • (meta).ts：定义了该widget的信息。
      • index.ts：源代码，可以导入其他文件，将被剪枝、构建至单个文件。
• scripts/：开发、构建、部署过程中需要用到的代码；
• tools/：src、scripts共用的代码。它在src中用于定义元数据，例如gadget的(meta).ts就导入了其中的模块。
• out/：输出文件夹，可于此处检查构建后的页面内容。

TODO

• 检查两次提交的差异，仅推送差异部分